Input Radio和Checkbox標籤的高富帥用法

標籤：style   class   blog   code   color   com   

input標籤中radio和checkbox這標籤的原生效果讓人無力吐槽，實在太醜。

好在現在weibkit瀏覽器可以用

-webkit-appearance:none;

來改變自己的矮矬窮形象。

radio標籤

使用情境1：很多圖片下方的點點點，這樣做的好處是用JS設定一個點為選中只要將這個元素的checked設定為true即可，而且用滑鼠點擊也不需要另外寫JS指令碼。

簡單版的CSS代碼如下：

.radio{    width: 10px;    height: 10px;    -webkit-appearance: none;    pointer-events: none;    border-radius: 5px;    display: inline-block;    background-color: rgb(205,205,205);    margin: 0 5px;}.radio:checked{    background-color: rgb(134,176,213);}

checkbox標籤

使用情境1：開關按鈕，開關按鈕可以用一張圖片，然後設定其background-position-x屬性左右移動。

簡單版的CSS代碼如下：

.checkbox{    -webkit-appearance:none;    width: 100px;height: 30px;    background-color: #fff;    background-image: url(‘img/checkbox.png‘);    background-repeat: no-repeat;}.checkbox:checked{    background-position-x: 100px;}

 結語

當然這個只是最簡單的效果，還可以添加各種滑鼠划過、滑鼠點擊、動畫等效果。