改变input单选框样式(变成圆)

水深无声 2023-05-30 09:17 6阅读 0赞

# 改变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;
    }

![在这里插入图片描述][201911132258150.png]

## 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%;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]

### 5.所有代码综合代码 ###

html

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%;
    
            }

[201911132258150.png]: https://img-blog.csdnimg.cn/201911132258150.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191113230446730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70