Custom beautification Checkbox and Radiobox implemented by CSS3 and jQuery

Now we can often see some very strange form elements on the network, such as the Checkbox check box and Radiobox single sheet, the default style of the browser is indeed too ugly, what makes it even worse is that the styles of various browsers are not uniform. Considering that more and more users are using modern browsers, we can use CSS3 to customize and beautify these check boxes and single quotes, let's take a look at the preview:

Is it better than the default one, and the Personal Aesthetic should still be OK.

Next, let's take a look at the source code for implementing this simplified version of Checkbox. The main idea is to hide the original checkbox and radiobox, use a div to simulate the checkbox/radiobox, and use jQuery to complete the animation effect during the selection and switching.

Let's take a look at the HTML code:

                    Gender:                             Male                     Female                            Favorite music:                              Pop music                              Rock music                              Rap music                              Hiphop music            

Then we use jQuery code to create a div for each checkbox and radiobox. The classname of this div is check-box and radio-btn.

$('input[name="radio-btn"]').wrap('<div class="radio-btn"><i></i></div>''input[name="check-box"]').wrap('<div class="check-box"><i></i></div>');

Next we will hide the original checkbox and set the style of the simulated div:

{:;}

{:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;}{:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;}{:;:;:;:;}{:;:;:;:;:;}{:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;}{:;:;:;}{:;:;:;:;:;:;:;:;:;}{:;}

The above CSS3 Code uses a style to customize the div, so that the style of the div is the same as that of the checkbox and radiobox.

Finally, we can simulate clicking, selecting, and unselecting. This part is also implemented using jQuery:

$(".radio-btn").on('click',  _this = $(='input:radio').attr('checked', ".radio-btn").removeClass('checkedRadio''checkedRadio''input:radio').attr('checked', 

$.fn.toggleCheckbox = .attr('checked', !.attr('checked''.check-box').on('click', ).find(':checkbox').toggleClass('checkedBox'

This Code allows you to create a small animation when selecting or canceling a selection.

This checkbox and radiobox have been introduced, and there are also some similar rewriting of checkbox and radiobox, which is quite troublesome. You can check it yourself: CSS3 beautiful custom Checkbox check box 9 charming style, pure CSS3 beautify Checkbox and Radiobox button looks very stylish.

Finally, share the source code.>