CSS custom checkbox and Radio styles

Very common problem, there are many people have written similar articles, write their own to record

The CSS code is as follows:

#myCheck + label,.myradio + label{width:16px;Height:16px;Border:1px solid #09c;Display:Inline-block;text-align:Center;vertical-align:Middle;Line-height:15px;font-size:12px;}#myCheck + Label{Border-radius:3px;}. MyRadio + Label{Border-radius:50%;}#myCheck: Checked + label:after,.myradio:checked + label:after{Color:#09c;}#myCheck: Checked + label:after{content:"?";}. myradio:checked + label:after{content:"";}

The DOM structure is as follows:

<inputtype= "checkbox"ID= "MyCheck"><label for= "MyCheck"></label><inputtype= "Radio"class= "MyRadio"ID= "MyRadio1"name= "Test"><label for= "MyRadio1"></label><inputtype= "Radio"class= "MyRadio"ID= "MyRadio2"name= "Test"><label for= "MyRadio2"></label>

The effect is as follows:

It is important to note that:

1. Label needs to be written after input , because the label style is set according to input

2. Do not use display:none when hiding ijnput, as this will remove it completely from the tab switch Focus queue, you can set the width height to 0, or move out of the page display area, or set the opacity:0 Or use a crop, whatever you think is the right way to do it.

This article simply wrote down the implementation of ideas and methods, the project label can set the background picture, even because the framework is popular, many people prefer not to use Ckeckbox or radio , but instead of other elements, Use state to control the style of an element

If there is inaccurate expression, welcome to correct, welcome to add, thank you for reading.

CSS custom checkbox and Radio styles