Pure CSS + HTML custom checkbox effect, csscheckbox

Pure CSS + HTML custom checkbox effect, csscheckbox

Checkbox should be a commonly used html function, but the checkbox that comes with the browser is often not very nice-looking, and the effects of different browsers are different. In order to beautify and unify the visual effect, the custom checkbox is proposed. Here we will summarize the implementation methods.

Implementation

The main method to implement pure css is to uselabelLabel simulation function.labelOfforAttribute can be associated with a specificinputElement, even ifinputIt cannot be visible to users.labelAfterlabelTag interaction to replace nativeinput-- This leaves space for style simulation. In short

Hides native input. The style definition process is leftlabel(Why not change the checkbox style directly? Because checkbox is the default component of the browser, style changes are not as convenient as labels.checkboxThey do not work, for examplebackground, AndlabelThe style is basically the same as that of div ')

In the selection event, because of the existence of the css "adjacent selector (E + F)", we can directly use the default checkbox of html, saving the trouble of js simulation selection.

Demo

Some CSS3 attributes of the DEMO only contain the webkit prefix. Therefore, we recommend that you use a webkit kernel browser to view this page.
HTML code:

<Div class = "wrap"> <! -- The id of 'input' must exist. This is required for label element matching. --> <! -- We can see that the "for" attribute of each input id corresponds to the same string of the label --> <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>

HTML is built, followed by the corresponding css.

. Wrap {width: 500px; background-color: # EEE; border: 2px solid # DEF;}/* Hide all checkpoints */input [type = 'checkbox'] {display: none;}/* simulate the label. the background image can be pieced together. Do not try it out * // * The transition effect is a background switching effect. This is just a demonstration here. In fact, this transition is not 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.5 s linear;}/* use adjacent selector and checkbox ': checked 'status pseudo class to simulate the default selected effect (that is, the effect of the check mark after clicking) * // * If this code annotation, after clicking, no feedback will be sent to the user * // * because the label itself is not selected after clicking, after the checkbox is hidden, this status can only be manually simulated */input [type = 'checkbox']: checked + label {background-position: 0-60px ;}

The effect of the above Code is as follows, and it seems OK.

But think about it, it seems that something is missing:Prompt text corresponding to the option
New people who do not know css may have the first reaction at this time.labelLaterpTag orspanLabel to add text. However, this method is not very elegant. I suggest using css::beforeAnd::afterPseudo element (::beforeAnd:beforeIs a thing. However, to distinguish "pseudo elements" from "pseudo classes", W3C recommends that you use the pseudo element::For pseudo-classes:)
The specific content of pseudo elements is not mentioned here. (In fact, I only need to use them. If I cannot understand them, I won't miss it)

/* It is easy to define the 'content'. The other attributes are the same as those of the common div */label: after {content: attr (data-name ); /* use attr to reduce the amount of css code. data-name is written in the label attribute of the html part */display: inline-block; position: relative; width: 120px; height: 60px; left: 100%; vertical-align: middle; margin: 10px ;}

Of course::afterSimulate the label text, then you can use::beforeSimulationlabelThe checkbox style is not parsed here.

Address: https://segmentfault.com/a/1190000003711140