<div class="box">
　　<!-- 借鉴地址：http://www.cnblogs.com/xiaoxianweb/p/5465607.html -->

　　<!-- 复选框type改成check即可 -->

　　<span class="check">

　　　　<input type="radio" name="radio" id="check1">

　　　　<label for="check1"></label>

　　</span>

　　<label for="check1">男</label>

　　<br>

　　<br>

　　<span class="check">

　　　　<input type="radio" name="radio" id="check2">

　　　　<label for="check2"></label>

　　</span>

　　<label for="check2">女</label>

</div>

* { margin:; padding:; }

.box { width: 300px; height: 100px; margin: 100px auto; }

/*现将input和label放在一个盒子中，使用定位将input放在label下隐藏*/

.check { position: relative; display: inline-block; width: 20px; height: 20px; margin-right: 5px; }

.check input { display: none; }

.check label { position: absolute; width: 16px; height: 16px; top:; left:; border: 2px solid #cacaca; border-radius: 50%; background: #fff; }

/*鼠标悬浮样式*/

.check label:hover { border-color: #f78642; }

.check label:after { position: absolute; content: ""; width: 8px; height: 4px; border: 2px solid #cacaca; border-top: none; border-right: none; opacity: 0.4; transform: rotate(-45deg); top: 4px; left: 3px; }

.check label:hover:after { border-color: #f78642; }

/*重点在这里！因为label和input绑定在了一起，

    并且在一个盒子中属于兄弟元素，

    使用css选择器 '+' 将选中的input和他同级的label的样式设置如下，

    只有opera支持label属性样式更改，

    这种方式完美解决了不兼容各大

    主流浏览器问题（IE我就不说什么了），

    6的一逼。妈妈再也不用担心我为复选框样式发愁

    啦，感谢博客园作者《小仙前端》*/

.check input:checked+label { border: 2px solid #f78642; }

.check input:checked+label:after { opacity:; border: 2px solid #f78642; border-top: none; border-right: none; }

input[type="range"]{

    width: 300px;

    height: 10px;

    border:;

    background-color: #f0f0f0;

    border-radius: 5px;

    position: relative;

    -webkit-appearance: none !important;

    outline: none;

}

input[type=range]::-webkit-slider-thumb {

    -webkit-appearance: none;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: #ff4400;

}