java设置可多选按钮_CSS优化单选多选按钮样式（1）

【前言】

本文简单介绍一种优化自定义单选和多选框样式的方法

【主体】

原理：(1)利用label关联标签进行模拟，然后将原选择的按钮隐藏；

(2)选中样式设置：input[type="radio"]:checked+label和input[type="checkbox"]:checked+label

(3)利用伪元素添加选中后的√和圆点--content内填入css特殊字符表

优化单选多选

*{

margin: 0;

padding: 0;

}

hr{

margin: 20px 0;

}

input[type="radio"],input[type="checkbox"]{

vertical-align: middle;

margin: 0 3px;

}

/*label模拟*/

.checkbox_area label{

display: inline-block;

background: white;

width: 20px;

height: 20px;

vertical-align: text-top;

border:1px solid #d3d3d3;

}

.radio_area label{

box-sizing: border-box;

display: inline-block;

background: white;

width: 20px;

height: 20px;

border: 1px solid gray;

border-radius: 50%;

vertical-align: middle;

}

/*隐藏自带单选多选框*/

.checkbox_area input[type="checkbox"],.radio_area input[type="radio"]{

display: none;

}

/*鼠标悬停时样式*/

.checkbox_area label:hover,.radio_area label:hover{

cursor: pointer;

}

/*多选框选中样式*/

.checkbox_area input[type="checkbox"]:checked+label{

text-align: center;

background: #2783FB;

line-height: 20px;

}

.checkbox_area input[type="checkbox"]:checked+label:after{

content: "2714";

color: white;

}

/*单选框选中样式*/

.radio_area input[type="radio"]:checked+label{

font-size: 30px;

background: #2783FB;

text-align: center;

line-height: 15px;

}

.radio_area input[type="radio"]:checked+label:after{

content: "2022";

color: white;

}

.method1{

width: 600px;

height: 300px;

margin: 10px auto;

border:1px solid red;

}

.method1 p{

margin: 10px 0;

}

原理：(1)利用label关联标签进行模拟，然后将原选择的按钮隐藏；

(2)选中样式设置：input[type="radio"]:checked+label和input[type="checkbox"]:checked+label

(3)利用伪元素添加选中后的√和圆点--content内填入css特殊字符表

(复选框)科目：

语文

数学

英语

---

(单选框)性别:

男

女