Pure CSS Implementation custom checkbox check box

Words not much to say, straight into the subject. It is well known that the native checkbox check box, radio radio button, select Selection box, different browsers differ greatly, the most important point is not very good-looking, if directly take the native, may affect the overall aesthetics. The third-party UI used in the project is well-established, but when small projects do not want to adopt a third-party UI or use a checkbox style that is not customized like bootstrap, it is necessary to make a corresponding check box. In this case, you have made a relatively beautiful checkbox with pure CSS with minimal changes. Such as:

Put the code directly below:

HTML section:

<label for= "My_checkboc">                   <inputtype= "checkbox"ID= "My_checkboc"class= "My_checkbox">        <!--adds a custom check box element span as long as the style is applied on it -        <spanclass= "New_checkbox"></span>check box 1</label>

Note that this HTML structure, the outermost of the label label, contains a native checkbox and a span that requires a custom style to define the checkbox style.

CSS section:

label{position:relative;}label. New_checkbox{Display:Block;width:14px;Height:14px;Border:1px solid #d9d9d9;Border-radius:2px;Background-color:#fff;position:Absolute;Top:4px; Left:2px;Z-index:1;cursor:Pointer;-webkit-transition:All . 2s;transition:All . 2s;}label. New_checkbox:hover{Border-color:#1890ff;}. My_checkbox{Opacity:0;}. My_checkbox:checked+span{Border-color:#1890ff;Background-color:#1890ff;}/*the value of the associated checkbox*/. My_checkbox:checked+span::before{content: "";Display:Block;width:6px;Height:10px;Border-bottom:2px solid #fff;Background-color:#1890ff;Border-right:2px solid #fff;Transform:Rotate (45deg);position:Absolute;Top:0; Left:4.5px;box-sizing:Border-box;}

Define the style of the span, navigate to the appropriate position, and set the transparent 0 to the original checkbox so that the Style section is OK. The next step is to add a click to select. Because lable and Checbox are bound, click the Label area to select the Change checkbox, you need to add a selected style to the custom span. With the CSS "+" selector, as shown in the code, when the checkbox is selected, a SPAN element will be added: Before Pseudo class, which displays the selected icon. The checked tick icon in the figure is rotated by a box with only a border and a bottom frame.

If you have any questions, please leave a message, this time to write, the following will be updated, as well as the relevant pure CSS radio check box and JS to create a select box for your reference.

Pure CSS Implementation custom checkbox check box