How to use css3 to change input single-select and multi-select styles

In project development, we often encounter situations where we need to change the input single-select and multi-select styles. Today I will introduce to you a simple way to change the input single-select and multi-select styles.

Let’s briefly introduce it before this:beforepseudo-class

:before selector inserts content before the selected element . Use the content attribute to specify the content to be inserted (content is required).

I believe this is not difficult to understand. Next, let’s understand the idea first:

(1) First use label to define a mark for the input element in html, that is, when you click the label label The corresponding input will also be selected or deselected

(2) The next step is to write css, hide the input, just add your style before the label, it can be pictureIt can also be a circle drawn by yourself. The example below is the circle I wrote. Of course, it can also be replaced with a background image.

input[type="radio"]+label:before是未选中状态的样式

input[type="radio"]:checked+label:before是选中状态的样式

<input type="radio" id="nationality1"><label for="nationality1">中国</label></p>

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

Replace radio with checkbox to make multiple selections.

Note: Hiding and pseudo-class positioning are key

The above is the detailed content of How to use css3 to change input single-select and multi-select styles. For more information, please follow other related articles on the PHP Chinese website!