瀏覽器自帶的一些ui控件都不太美觀，有時(shí)候我們需要對(duì)這些控件的外觀進(jìn)行美化，美化控件的方式有很多種，可以使用JavaScript， 也可以使用純css樣式的方式，由于各個(gè)瀏覽器對(duì)css屬性支持的不同，使用css美化控可能存在兼容性問題，但順著IE瀏覽器市場(chǎng)份額越來越低，甚至可以忽略ie瀏覽器，我們便可以大膽在項(xiàng)目中使用一些新特性來提高我們項(xiàng)目的用戶體驗(yàn)。
(圖1) 瀏覽器默認(rèn)控件
(圖2)使用css美化過后的控件
1、直接貼代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title><br />
</head>
<body>
<div>
<h5>您最喜歡哪門語言</h5>
<label><input class="radio" type="radio" name="radio" > java</label>
<label><input class="radio" type="radio" name="radio"> php</label>
<label><input class="radio" type="radio" name="radio"> python</label>
<label><input class="radio" type="radio" name="radio" checked> JavaScript</label>
</div>
<br />
<div>
<h5>您最喜歡那些城市</h6>
<label><input class="checkbox" type="checkbox" checked> 北京</label>
<label><input class="checkbox" type="checkbox" checked> 上海</label>
<label><input class="checkbox" type="checkbox" checked> 杭州</label>
<label><input class="checkbox" type="checkbox" checked> 西安</label>
</div>
<style>
input{
outline: none;
}
.radio,.checkbox {
width: 1.2rem;
height: 1.2rem;
background-color: #ffffff;
border: solid 1px #dddddd;
-webkit-border-radius: 0.6rem;
border-radius: 0.6rem;
font-size: 0.8rem;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
vertical-align: top;
cursor: default;
-webkit-appearance: none; /**隱藏原生控件**/
}
.checkbox {
border-radius: 0.1rem; /**復(fù)選框的圓角要小一些**/
}
/**選擇后的樣式**/
.radio:checked,.checkbox:checked{
background-color: #04c9e8;
border: solid 1px #00adc8;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
text-align: center;
background-clip: padding-box;
}
/**選擇后 里面小對(duì)勾樣式**/
.radio:checked:before,.checkbox:checked:before{
content: '';
width: 0.5rem;
height: 0.3rem;
border: 1px solid #ffffff;
border-top: none;
border-right: none;
position: absolute;
top: 50%;
left: 50%;
margin-left: -0.25rem;
margin-top: -0.25rem;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
</body>
</html>
