利用css3修改input[type=radio]样式

做项目的时候需要使用单选按钮input[type=radio]，但是默认的样式与UI设计不一致,所以需要修改默认的样式，如下图。搜索的时候发现有一些实现是利用背景图实现。不想使用图片，所以利用css3的重新实现了一遍。在ie8下无效。

原理

利用<label>标签与对应的<input>关联,给<input>设置透明,使用position(定位)让用户看到的是<label>标签的样式,点击<label>时会选择到对应的<input>,使用<input>的:checked伪类选择器来改变选中<label>的样式.

实现代码

html

    
    
     
        
              
              
      选项一    
     
    
     
        
              
              
      选项二    
     
    

css

div {            position: relative;            line-height: 30px;        }                input[type="radio"] {            width: 20px;            height: 20px;            opacity: 0;        }                label {            position: absolute;            left: 5px;            top: 3px;            width: 20px;            height: 20px;            border-radius: 50%;            border: 1px solid #999;        }                /*设置选中的input的样式*/        /* + 是兄弟选择器,获取选中后的label元素*/        input:checked+label {             background-color: #fe6d32;            border: 1px solid #fe6d32;        }                input:checked+label::after {            position: absolute;            content: "";            width: 5px;            height: 10px;            top: 3px;            left: 6px;            border: 2px solid #fff;            border-top: none;            border-left: none;            transform: rotate(45deg)        }

dome

链接：