當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html表单复选框样式,美化表单——自定义checkbox和radio样式

發(fā)布時間：2023/12/2 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 html表单复选框样式,美化表单——自定义checkbox和radio样式小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

如果你對本站比較觀注的話，應(yīng)該很清楚，前面就有這方面的介紹。因?yàn)榇蠹叶贾辣韱沃械牟糠衷厝绻麊螁问褂肅SS是沒辦法完成的，所以最近花全力在學(xué)習(xí)這方面的制作。在本站有關(guān)于這樣制作有好幾個教程了，比如說：

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

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

一、HTML Markup

Checkbox1

Checkbox2

Radio1

Radio2

Radio3

寫這樣的HTML結(jié)構(gòu)是非常容易的，這里有幾點(diǎn)需要注意：

把“input[type=checkbox]”和“input[type=radio]”都放在一個“l(fā)abel”內(nèi)；

所有“input[type=checkbox]”和“input[type=radio]”必須定義一個唯一的類名，而且其對應(yīng)的“l(fā)abel”的“for”屬性值與相對應(yīng)的“input”的ID類名一致；

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

二、CSS Code

在具體實(shí)現(xiàn)設(shè)計(jì)圖之前，我們需要給checkbox和radio準(zhǔn)備好樣式風(fēng)格所需的圖片：

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

/*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: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #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;

}

現(xiàn)在你把這些樣式寫上并不見得你就有效果的，換句話說，上面的樣式都寫好了，在你的實(shí)際項(xiàng)目中并不能看到上圖展示的checkbox和radio風(fēng)格樣式，那是為什么呢？因?yàn)槲覀冞€少了最關(guān)鍵的一步。

三、腳本代碼

這一步是我們實(shí)現(xiàn)效果的關(guān)鍵一步，我們需要使用javascript或者jquery來實(shí)現(xiàn)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();

};

只要在你的項(xiàng)目中的“

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

2、jQuery Code

前面使用的是javascript的方法，接下來我們一起來看使用jQuery的方法實(shí)現(xiàn)，在使用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的美化，大家可以根據(jù)自己的需求更換背景圖片或者說寫一個更適合自己的腳本，如果你還重來都沒有這樣做過的話，或者說你在js和jquery方面沒有任何基礎(chǔ)，你也可以直接copy上面的代碼，只是更改相應(yīng)的樣式就能完成相同的功能了。心動不如行動吧，動手試試。希望能給大家?guī)硪稽c(diǎn)幫助。

如需轉(zhuǎn)載煩請注明出處：W3CPLUS

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：可隐藏选项卡html,隐藏HTML中选定
下一篇：把html文件变成php,怎么把动态的p