input的checkbox和radio控制元件樣式美化
阿新 • • 發佈:2019-01-11
複選框 Checkbox 是 Web 應用常用控制元件,隨處可見,原生的複選框控制元件一般不能滿足我們的需求,設計師喜歡一些漂亮的圖片,用css做出此效果。
<input type="checkbox" id="gps_open_close" /> input#gps_open_close[type="checkbox"]{<span style="color:#FF0000;">-o-appearance: none; -webkit-appearance: none;-moz-appearance:none;</span> background-image:url("../../images/pc/gps/select_button.png");vertical-align: middle; width:19px;height:19px; background-repeat: no-repeat;} input#gps_open_close[type="checkbox"]:checked{ background-image:url("../../images/pc/gps/selected_button.png"); }
input[type="checkbox"]{ -o-appearance: none; -webkit-appearance: none;-moz-appearance:none; background-image:url("../../images/pc/gps/checkbox.png"); width:19px;height:19px; background-repeat: no-repeat; } input[type="checkbox"]:focus, input[type="checkbox"]:hover { background-position: -24px 0; outline: none; } input[type="checkbox"]:checked { background-position: -48px 0; } input[type="checkbox"][disabled] { background-position: -72px 0; } input[type="checkbox"][disabled]:checked { background-position: -96px 0; }
因為圖片已經事先合併成一張了,簡單修改一下 background-position
就可以了,同時前面幾個選擇器的優先順序(權重)一樣,所以書寫順序很重要。
相容性
目前只相容 Webkit 系列瀏覽器;雖然 Firefox 也實現了替代的 -moz-appearance
屬性,不過控制元件原有的背景顏色、邊框樣式無法修改,暫時也不大好用;IE 系列暫時不支援該屬性,更詳細的相容情況檢視
Caniuse/appearance。因此需要為 IE 瀏覽器清除掉背景圖片的影響:
input[type="checkbox"] { background: #fff url(i/blue.png); background: none\0; *background: none; ... }
另外在別人的部落格上學到了新的方法美化checkbox,使用span設定background,radio的原本樣式隱藏
<span class="pay_list_c1 on">
<input type="radio" checked="checked" name="paylist" value="1" class="radioclass">
</span>
.pay_list_c1 {
width: 24px;
height: 18px;
float: left;
padding-top: 3px;
cursor: pointer;
text-align: center;
margin-right: 10px;
background-image: url(images/inputradio.gif);
background-repeat: no-repeat;
background-position: -24px 0;
}
.radioclass {
<span style="color:#FF0000;">opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);</span>
}
.on {
background-position: 0 0;
}
相關文章: