Detailed CSS and HTML custom checkbox effects

The checkbox should be a more commonly used HTML feature, but the browser comes with a checkbox that is often not very good-looking and has different browser effects. The customization of the checkbox is presented for the purpose of beautifying and unifying visual effects. This article mainly for you to share css+html custom checkbox effect, together to see it, hope to help everyone.

Implementation ideas

The main way to implement the pure CSS is to use the label tag's simulation function. The label's for property can be associated with a specific INPUT element, even though the input itself cannot be visible to the user, and with a label corresponding to it, the user can directly interact with the label tag to replace the native input--, which leaves room for our style simulations. In short, it is

Hide native input, the process of style definition is left to label (so why not change the checkbox's style directly?). Because the checkbox is a default component of the browser, the style changes are not as convenient as the label, and many properties do not work for the checkbox, such as background, and the label is basically "trampled" on the same style as p.
On the selection event, due to the existence of the CSS's "neighbor selector (e+f)", we can directly take advantage of the HTML default checkbox, eliminating the trouble of JS analog selection.

Demo

Part of the Demo CSS3 property only writes the WebKit prefix, so it is recommended to use the WebKit kernel browser to view this page

HTML code:

<p class= "Wrap" >    <!--' input ' must have an ID that is required for the label to match elements-    <!--can see the ID of each input and the "for" of the label property corresponds to the same string--><input type= "checkbox" id= "checkbox01"/><label for= "checkbox01" ></label>< Input type= "checkbox" id= "checkbox02"/><label for= "checkbox02" ></label><input type= "checkbox" id= "checkbox03"/><label for= "checkbox03" ></label><input type= "checkbox" id= "checkbox04"/>< Label for= "CHECKBOX04" ></label>

The HTML is built, followed by the corresponding CSS.

. wrap {  width:500px;  Background-color: #EEE;  border:2px solid #DEF;} /* Hide All checkboxes */input[type= ' checkbox '] {  display:none;} /* Simulate the label. Background picture casually pieced together, do not spit groove taste *//*   transition effect is to do a background switch effect, here simply demonstration, actually this transition does not add more natural */label {  display: Inline-block;  width:60px;  height:60px;  position:relative;  Background:url (//www.chitanda.me/images/blank.png);  background-position:0 0px;  -webkit-transition:background 0.5s Linear;} /*  Use the status pseudo-class of the adjacent selector and checkbox ': Checked ' to simulate the default check effect (that is, the effect of clicking on the tick)  *//* If this code comment, no feedback will be given to the user after the click *//* Because the label itself is not selected after the click of the state, the checkbox is hidden, this state can only manually simulate */input[type= ' checkbox ']:checked+label {  background-position : 0-60px;}

The effect of the above code is as follows, and it looks as if it can.

But think about it, seemingly missing something: the text of the hint that corresponds to the option

New people who don't know about CSS may be the first to add text after the label with a P tag or a span tag. But this is not a very elegant way. Personal advice with CSS:: Before and:: After pseudo elements (:: Before and: Before is a thing. However, in order to distinguish between "pseudo-element" and "Pseudo-class", the proposal is written in pseudo-elements:: and Pseudo-class:)
The specific content of the pseudo-elements here not to say, (in fact, I also have their grasp of the only use, for this is not understood, it is not fraught)

/* The pseudo element takes effect very simply, the definition ' content ' is good, the rest of the properties and ordinary p like */label::after {   content:attr (data-name);   /* Use attr to reduce the amount of CSS code, data-name written in the HTML section of the label attribute */  display:inline-block;  position:relative;  width:120px;  height:60px;  left:100%;  Vertical-align:middle;  margin:10px;}

Of course, since you can use:: After the text of the simulation label, it can also be used:: Before simulation label checkbox style, here do not parse.