Custom form style checkbox and radio_html/css_WEB-ITnose

1. Reason

Recently, I have to implement a customized radio style at work, and we usually use the default style because we really can’t think of a solution, so We started searching and finally saw a great solution that perfectly solved the problem we were having.

2. Principle

Everyone knows that when writing a structure, radio or checkbox will be used together with label. When the for attribute value of label is the same as the id value of input, click label You can select the input. Here we use label to override the default style of our input. By adding a background image (beautified checkbox or radio) to the label, we cannot see the default input during the click process ( Set z-index: -1 for the input, and click on the label. Load different background images through different events (here is the position of changing the background image)

3. Set the beautification checkbox or radio Default style

(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 prerequisite is that the jquery library must be introduced)

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 id			var label = $('label[for='+input.attr('id')+']');			//get type,for classname suffix			var 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 attribute			var allInputs = $('input[name='+input.attr('name')+']');			//necessary for browsers that don't support the :hover pseudo class on labels			label.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 events			input.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');			});							}	});}

After introducing the jquery library and the above code, you can execute the following code

$('input').customInput();

(3) The generated outer div

If your code structure is that label and input are written in pairs, then a div will be generated outside them, as shown in the figure

(4) Set a custom default style

Prepare a picture, as follows:

You may ask, why is the top not at the top, but at a certain distance, because most of our input options are Centered, and we use the background image of the label to simulate it, so we want to center the input option. In short: ico small icons must be arranged vertically, and a certain distance must be left to achieve centered 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 the outermost settings, of course you can modify them yourself

/* ==默认状态效果== */            .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;            }

/*==鼠标悬停和得到焦点状态==*/            .custom-checkbox label.hover,            .custom-checkbox label.focus,            .custom-radio label.hover,            .custom-radio label.focus {                /*background-position: -10px -114px;*/            }                        /*==选中状态==*/            .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;            }

End: In short, I solved my problem perfectly, and I will send you a screenshot to see

Reference source:

Beautify the form?? Customize radio buttons and check buttons (personal recommendation)

Beautify the form