純css美化復選框，單選框，滑動條（range）

<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: 0; padding: 0; }
.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: 0; left: 0; 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: 1; border: 2px solid #f78642; border-top: none; border-right: none; }

 

range美化

input[type="range"]{
    width: 300px;
    height: 10px;
    border: 0;
    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;
}