Detailed explanation of css changing the style of input single selection and multi-selection

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.

Before this, let’s briefly introduce it:before pseudo-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 a picture or you can draw it yourself The circle 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>

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 to make multiple selections.

Note: Hiding and pseudo-class positioning are key

The above is the detailed content of Detailed explanation of css changing the style of input single selection and multi-selection. For more information, please follow other related articles on the PHP Chinese website!