改变input单选框样式(变成圆)
改变input单选框样式(变成圆)
1.清空默认样式(最重要)
input{
outline: none 清空单选框，点击时蓝色默认边框
-webkit-appearance: none 清空单选框默认边框
- 1、-moz代表firefox浏览器私有属性
- 2、-ms代表[ie浏览器](https://www.baidu.com/s?wd=ie浏览器 &tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao)私有属性
- 3、-webkit代表safari、chrome私有属性
-webkit-tab-highlight-color: rgba(0, 0, 0, 0)
- 这个属性只用于iOS (iPhone和iPad)
- 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。
- 要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色
-
2.设置单选框大小和基本样式
width: 1.64rem; 设置宽高
height: 1.64rem;
display: inline-block; 变成行内元素
text-align: center; 文本水平居中
vertical-align: baseline; 将支持valign特性的对象的内容与基线对齐
line-height: 1.64rem; 文本垂直
position: relative;
border-radius: 50%;
color: #fff;
background: #fff;
border: 1px solid #fff;
当你清空默认样式后，页面是空白的
3.设置点击前样式
input[type="checkbox"]::before {
content: "";
position: absolute;
top: -2px;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #999999;
border-radius: 50%;
color: #fff;
box-sizing: border-box;
}
4.设置点击后样式
checked 表示点击后样式
before ，表示点击后 before 伪类的样式变化
input[type="checkbox"]:checked::before {
content: "\2713";
background-color: #657afe;
border: 1px solid #657afe;
position: absolute;
top: -2px;
left: 0;
width: 100%;
color: #fff;
font-size: 1rem;
border-radius: 50%;
}
5.所有代码综合代码
html
<input type="checkbox" />
css
input[type="checkbox"] {
width: 1.64rem;
height: 1.64rem;
display: inline-block;
text-align: center;
vertical-align: baseline;
line-height: 1.64rem;
position: relative;
border-radius: 50%;
outline: none;
-webkit-appearance: none;
border: 1px solid #fff;
-webkit-tab-highlight-color: rgba(0, 0, 0, 0);
color: #fff;
background: #fff;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #999999;
border-radius: 50%;
color: #fff;
}
input[type=checkbox]:checked::before {
content: "\2713";
background-color: #657afe;
border: 1px solid #657afe;
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #fff;
font-size: 0.52rem;
border-radius: 50%;
}