Css3 changes the single-choice and multi-choice input styles, and css3input multiple-choice

Css3 changes the single-choice and multi-choice input styles, and css3input multiple-choice

During project development, we often encounter the need to change the input Single-choice and multi-choice styles. Today we will introduce a simple method to change the input Single-choice and multi-choice styles.

Before that, let's briefly introduce the before pseudo class.

: The 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 hard to understand. Next we will first understand the concept:

(1) first define the tag for the input element with label in html, that is, when you click the label, the corresponding input will also be selected or canceled.

(2) The next step is to write css and hide the input. You only need to add your style before the label. It can be an image or a circle drawn by yourself, the following example shows the circle I wrote. Of course, it can be replaced with a background image.

Input [type = "radio"] + label: before is an unselected style.

Input [type = "radio"]: checked + label: before is the selected style.

<Input type = "radio" id = "nationality1"> <label for = "nationality1"> China </label> </div>

input[type="radio"]{    display:none;}input[type="radio"]+label{    position: relative;}input[type="radio"]+label:before{    content: "";    width:25px;    height:25px;    background: #ffffff;    border:2px solid $gray;    position: absolute;    bottom:3px;    left: -35px;    border-radius: 50%;}                                                   
input[type="radio"]:checked+label:before{    content: "";    width: 25px;    height: 25px;    background: #34c0f5;    position: absolute;    bottom:3px;    left: -35px;    z-index: 99;    border-radius: 50%;}                            

Replace radio with checkbox.

Note: hidden and pseudo-class positioning are the key