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 徐嘉裕 

留言

這個網誌中的熱門文章

jquery.datepicker下拉月曆只顯示年-月的設定方法-教學撰寫:徐嘉裕Neil hsu

在CentOS7上安裝XAMPP並設定允許外部連線phpmyadmin的方法-教學撰寫:徐嘉裕Neil hsu

jQuery用.each()取代for迴圈