CSS3自訂 type='checkbox'樣式範例可直接套用

說真的原生的 type='checkbox' 真的是醜到爆了，樣式又不好修改，實在很無奈!!

剛好在網上找到有高人寫好CSS3的 type='checkbox' 樣式，套用去後果然美觀好看多了，而且居然不是jQuery寫的，真是神奇阿!!

套用方法很簡單，HTML部分如下

<div id="mycheck"><input id="checkbox1" class="css-checkbox" type='checkbox' name='mycheck' value='test'><label for="checkbox1" class="css-label">文字文字文字文字</span></label>

如果表單有多個type='checkbox'請吧id="checkbox1"編號改成id="checkbox2"然後345編下去，另外for="checkbox1"也是一樣改成for="checkbox2"然後345編下去，接下來貼入CSS3語法如下：

#mycheck input[type=checkbox].css-checkbox {

position: absolute;

z-index: -1000;

left: -1000px;

overflow: hidden;

clip: rect(0 0 0 0);

height: 1px;

width: 1px;

margin: -1px;

padding: 0;

border: 0;

}

#mycheck input[type=checkbox].css-checkbox + label.css-label {

padding-left: 45px;

height: 30px;

display: inline-block;

line-height: 30px;

background-repeat: no-repeat;

background-position: 0 0;

font-size: 50px;

vertical-align: middle;

cursor: pointer;

}

#mycheck input[type=checkbox].css-checkbox:checked + label.css-label {

background-position: 0 -30px;

}

#mycheck label.css-label {

background-image:url(http://csscheckbox.com/checkboxes/u⋯⋯);

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

這樣就能吧原本醜到爆的type='checkbox'改成漂漂亮亮的樣式了，看了心情也美麗多了。

教學撰寫：Neil hsu 徐嘉裕