Ways to change input radio and multi-select styles with CSS3

In the development of the project, we often encounter the need to change the input radio and multi-select style, today we will introduce a simple change input and multi-select style method.

Before that, let's briefly introduce: before Pseudo-class

: Before the selector to insert content before the selected element. Use the Content property to specify what you want to insert (the contents are required).

I believe this is not difficult to understand, then we first understand the idea:

(1) First in the HTML label for the INPUT element to define the tag, that is, when you click on the label tag, the corresponding input will also be selected or canceled

(2) Next is to write the CSS, will be input hidden, just need to add your style before the label, can be a picture can also be a circle of their own, the following example is I write the circle, of course, can also be replaced by a background map.

Input[type= "Radio"]+label:before is a style that is not selected

Input[type= "Radio"]:checked+label:before is the style of the selected state

<input type= "Radio" id= "Nationality1" ><label for= "nationality1" > China </label></p>

{:;} {:;} {:;:;:;:;:;:;:;:;:;} {:;:;:;:;:;:;:;:;:;}

Replacing radio with a checkbox is more than a choice.

Note: Hiding and pseudo-class positioning are key