改变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%;

​        }