Custom form style checkbox and radio, form checkboxradio

Custom form style checkbox and radio, form checkboxradio
1. Cause

Recently, we have to implement a custom radio style in our work, and we usually use the default style, because we can't think of a solution, so we began to search, finally, we saw a good solution to solve our problems perfectly.

2. Principle

Everyone knows that when writing a structure, radio or checkbox will be used together with the label. If the label's for attribute value is the same as the input's id value, click label to select input, here, we use the label to overwrite our input default style. By adding a background image to the label (beautifying the checkbox or radio), that is, during the click process, we do not see the default input (set z-index:-1 for input), and click label, load different background images (this is to change the position of the background image)

3. Set the default style to beautify the checkbox or radio.

(1) Page Structure

<form class="form" method="post"><fieldset><legend>Which genres do you like?</legend><input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" class="">Action / Adventure</label><input type="checkbox" value="comedy" id="check-2" name="genre"><label for="check-2" class="">Comedy</label><input type="checkbox" value="epic" id="check-3" name="genre"><label for="check-3" class="">Epic / Historical</label><input type="checkbox" value="science" id="check-4" name="genre"><label for="check-4" class="">Science Fiction</label><input type="checkbox" value="romance" id="check-5" name="genre"><label for="check-5" class="">Romance</label><input type="checkbox" value="western" id="check-6" name="genre"><label for="check-6" class="">Western</label></fieldset><fieldset><legend>Caddyshack is the greatest movie of all time, right?</legend><input type="radio" value="1" id="radio-1" name="opinions"><label for="radio-1" class="">Totally</label><input type="radio" value="1" id="radio-2" name="opinions"><label for="radio-2" class="">You must be kidding</label><input type="radio" value="1" id="radio-3" name="opinions"><label for="radio-3" class="">What's Caddyshack?</label></fieldset></form>

(2) jquery code (the jquery library must be introduced in advance)

jQuery.fn.customInput = function(){$(this).each(function(i){if($(this).is('[type=checkbox],[type=radio]')){var input = $(this);//get the associated label using the input's idvar label = $('label[for='+input.attr('id')+']');//get type,for classname suffixvar inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';//wrap the input + label in a div$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input,label);//find all inputs in this set using the shared name attributevar allInputs = $('input[name='+input.attr('name')+']');//necessary for browsers that don't support the :hover pseudo class on labelslabel.hover(function(){$(this).addClass('hover');if(inputType == 'checkbox' && input.is(':checked')) {$(this).addClass('checkedHover');}},function(){$(this).removeClass('hover checkedHover');});//bind custom event, trigger it, bind click,focus,blur eventsinput.bind('updateState',function(){if(input.is(':checked')){if(input.is(':radio')){allInputs.each(function(){$('label[for='+$(this).attr('id')+']').removeClass('checked');});};label.addClass('checked');} else {label.removeClass('checked checkedHover checkedFocus');}}).trigger('updateState').click(function(){$(this).trigger('updateState');}).focus(function(){label.addClass('focus');if(inputType == 'checkbox' && input.is(':checked')) {$(this).addClass('checkedFocus');}}).blur(function(){label.removeClass('focus checkedFocus');});}});}

Introduce the jquery library, and then introduce the above code, you can execute the following code

$('input').customInput();

(3) The generated outer div

If your code structure is written in pairs by label and input, a div is generated in the outer layer of the Code,

(4) set the custom default Style

Prepare a chart as follows:

You may ask why the above is not at the top, but there is a certain distance, because most of our input options are centered, and we use the label background image for simulation, so we want to center the input options. In short, ico icons must be arranged vertically and must be kept at a certain distance to achieve center display.

/* wrapper divs */.custom-checkbox, .custom-radio { position: relative; display: inline-block;}/* input, label positioning */.custom-checkbox input,.custom-radio input {position: absolute;left: 2px;top: 3px;margin: 0;z-index: -1;}.custom-checkbox label,.custom-radio label {display: block;position: relative;z-index: 1;font-size: 1.3em;padding-right: 1em;line-height: 1;padding: .5em 0 .5em 30px;margin: 0 0 .3em;cursor: pointer;}

These are some settings on the outermost layer. You can modify them by yourself.

/* = Default status effect = */. custom-checkbox label {background: url (images/checkbox.gif) no-repeat ;}. custom-radio label {background: url (images/button-radio.png) no-repeat ;}. custom-checkbox label ,. custom-radio label {background-position: 0px 0px ;}View Code/* = hover the cursor over and get the focus status = */. custom-checkbox label. hover ,. custom-checkbox label. focus ,. custom-radio label. hover ,. custom-radio label. focus {/* background-position:-10px-114px; */}/* = selected status = */. custom-checkbox label. checked ,. custom-radio label. checked {background-position: 0px-47px ;}. custom-checkbox label. checkedHover ,. custom-checkbox label. checkedFocus {/* background-position:-10px-314px ;*/}. custom-checkbox label. focus ,. custom-radio label. focus {outline: 1px dotted # ccc ;}View Code

Conclusion: in short, I have solved my problem perfectly. Let's take a look.

 

Reference Source:

Beautification form-custom single-choice button and check button (recommended for personal use)

Beautification form