改变input单选框样式（变成圆）
改变input单选框样式(变成圆)
1.清空默认样式(最重要)
input{
outline: none    清空单选框，点击时蓝⾊默认边框
-webkit-appearance: none  清空单选框默认边框
- 1、-moz代表firefox浏览器私有属性
- 2、-ms代表[ie浏览器](www.baidu/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为任何颜⾊
-
borderbox
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;
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%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。