如果你對本站比較觀注的話，應該很清楚，前面就有這方面的介紹。因為大家都知道表單中的部分元素如果單單使用CSS是沒辦法完成的，所以最近花全力在學習這方面的制作。在本站有關于這樣制作有好幾個教程了，比如說：

我主要是想通過這樣的系列教程讓大家更好理解和掌握這方面的制作技巧。那么今天在前面的基礎上再次增加一篇有關于表單中的checkbox和radio的樣式美化教程——美化表單——自定義checkbox和radio樣式。

在這個教程中我們主要從兩種方法來實現圖片代替默認checkbox和radio的樣式，第一種是javascript；第二種是jQuery。但不管哪一種，他們的原理都是一樣的。將checkbox和radio默認框和選中框制作成圖片，并將其集成在同一張圖片中。然后通過樣式讓其成為label的背景圖片，并應用不同的類名讓它實現選中和未選中的效果。緊接著需要將checkbox和radio的input產生隱藏的假像，最后在通過js或jQuery來給label增加或刪除選中和未選中的類名。詳細的制作過程如下：

一、HTML Markup

Checkbox1

Checkbox2

Radio1

Radio2

Radio3

寫這樣的HTML結構是非常容易的，這里有幾點需要注意：

把“input[type=checkbox]”和“input[type=radio]”都放在一個“label”內；

所有“input[type=checkbox]”和“input[type=radio]”必須定義一個唯一的類名，而且其對應的“label”的“for”屬性值與相對應的“input”的ID類名一致；

同一組的“input[type=radio]”需要具有一個相同的“name”值。

二、CSS Code

在具體實現設計圖之前，我們需要給checkbox和radio準備好樣式風格所需的圖片：

此時我們在給他寫上樣式：

/*form style*/

form {

width: 300px;

padding: 18px 20px 0;

margin:20px auto;

background-color: #0064cd;

background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));

background-image: -moz-linear-gradient(#049cdb, #0064cd);

background-image: -ms-linear-gradient(#049cdb, #0064cd);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));

background-image: -webkit-linear-gradient(#049cdb, #0064cd);

background-image: -o-linear-gradient(#049cdb, #0064cd);

background-image: linear-gradient(#049cdb, #0064cd);

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4);

-moz-box-shadow: 0 5px 12px rgba(0,0,0,.4);

-khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4);

box-shadow: 0 5px 12px rgba(0,0,0,.4);

}

fieldset {

border: 0;

padding-bottom: 9px;

}

label {

display: block;

cursor: pointer;

line-height: 20px;

padding-bottom: 9px;

text-shadow: 0 -1px 0 rgba(0,0,0,.2);

}

.checkboxes {

border-bottom: 1px solid #0064cd;

}

.radios {

padding-top: 18px;

border-top: 1px solid #049CDB;

}

.label_check input,

.label_radio input {

margin-right: 5px;

}

.has-js .label_check,

.has-js .label_radio {

padding-left: 34px;

}

.has-js .label_radio,

.has-js .label_check{

background: url(images/checkbox-radio-bg.png) no-repeat;

}

.has-js .label_radio {

background-position: 0 0;

}

.has-js .label_check {

background-position: 0 -100px

}

.has-js label.c_on {

background-position: 0 -150px;

}

.has-js label.r_on {

background-position: 0 -50px;

}

.has-js .label_check input,

.has-js .label_radio input {

position: absolute;

left: -9999px;

}

現在你把這些樣式寫上并不見得你就有效果的，換句話說，上面的樣式都寫好了，在你的實際項目中并不能看到上圖展示的checkbox和radio風格樣式，那是為什么呢？因為我們還少了最關鍵的一步。

三、腳本代碼

這一步是我們實現效果的關鍵一步，我們需要使用javascript或者jquery來實現label上的類名的切換，從而讓我們前面所寫的樣式生效(這也就是前面的樣式為什么不生效的原因)。這里我們主要來看兩種制作方法的代碼：

1、javaScript Code

var d = document;

var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;

var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };

onload = function() {

var body = gebtn(d,'body')[0];

body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';

if (!d.getElementById || !d.createTextNode) {

return;

}

var ls = gebtn(d,'label');

for (var i = 0; i < ls.length; i++) {

var l = ls[i];

if (l.className.indexOf('label_') == -1) {

continue;

}

var inp = gebtn(l,'input')[0];

if (l.className == 'label_check') {

//l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';

l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_off' : 'label_check c_on';

l.onclick = check_it;

};

if (l.className == 'label_radio') {

l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';

l.onclick = turn_radio;

};

};

};

var check_it = function() {

var inp = gebtn(this,'input')[0];

if (this.className == 'label_check c_off' || (!safari && inp.checked)) {

this.className = 'label_check c_on';

if (safari) {

inp.click();

};

} else {

this.className = 'label_check c_off';

if (safari){

inp.click();

};

};

};

var turn_radio = function() {

var inp = gebtn(this,'input')[0];

if (this.className == 'label_radio r_off' || inp.checked) {

var ls = gebtn(this.parentNode,'label');

for (var i = 0; i < ls.length; i++) {

var l = ls[i];

if (l.className.indexOf('label_radio') == -1) {

continue;

};

l.className = 'label_radio r_off';

};

this.className = 'label_radio r_on';

if (safari){

inp.click();

};

} else {

this.className = 'label_radio r_off';

if (safari) {

inp.click();

};

};

};

只要在你的項目中的“

”中或者“”前的任何位置加上上面的代碼，那你就能看到下面DEMO所示的效果：

2、jQuery Code

前面使用的是javascript的方法，接下來我們一起來看使用jQuery的方法實現，在使用jQuery之前大家需要先載入jQuery的版本庫：

引入版本庫后，接著就是寫替換類名的jQuery代碼：

function setupLabel(){

if($('.label_check input').length) {

$('.label_check').each(function(){

$(this).removeClass('c_on');

});

$('.label_check input:checked').each(function(){

$(this).parent('label').addClass('c_on');

});

};

if($('.label_radio input').length) {

$('.label_radio').each(function(){

$(this).removeClass('r_on');

});

$('.label_radio input:checked').each(function(){

$(this).parent('label').addClass('r_on');

});

};

}

$(function(){

$('body').addClass('has-js');

$('.label_check,.label_radio').click(function(){

setupLabel();

});

setupLabel();

});

最效果如DEMO所展示的一樣：

這樣幾步下來就完成了所需的checkbox和radio的美化，大家可以根據自己的需求更換背景圖片或者說寫一個更適合自己的腳本，如果你還重來都沒有這樣做過的話，或者說你在js和jquery方面沒有任何基礎，你也可以直接copy上面的代碼，只是更改相應的樣式就能完成相同的功能了。心動不如行動吧，動手試試。希望能給大家帶來一點幫助。

如需轉載煩請注明出處：W3CPLUS

總結

以上是生活随笔為你收集整理的html表单复选框样式,美化表单——自定义checkbox和radio样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。