公告:攜程招聘java、前端、測試、產品等,請發簡歷至[email protected],幫內推!

css input checkbox和radio樣式美化

275179次瀏覽

在之前的一篇文章中,我已經介紹了input file上傳按鈕的美化,地址:http://www.sqnjmr.live/post/css_input_uploadmh ,今天,我們來講一下checkbox美化和radio美化,關于select下拉框的美化的話,要用一個jquery插件了,這個插件后面我們再講!急用的同學可以留言! 但是像checkbox美化和radio美化,input美化,根本就不用插件了。思路都一樣的,先把之前的按鈕透明度opacity設置為0,然后,外層用div包裹,就實現了美化功能。

效果圖如下:

enter image description here

html代碼如下:

<span class="pay_list_c1 on">
<input type="radio" checked="checked" name="paylist" value="1" class="radioclass">
</span>

css 代碼:

.pay_list_c1 {
width: 24px;
height: 18px;
float: left;
padding-top: 3px;
cursor: pointer;
text-align: center;
margin-right: 10px;
background-image: url(images/inputradio.gif);
background-repeat: no-repeat;
background-position: -24px 0;
}
.radioclass {
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.on {
background-position: 0 0;
}

圖片下載:

enter image description here

enter image description here

checkbox方法一樣:

html

<div class="piaochecked on_check">
                <input name="need_inv" type="checkbox" style="height:20px;width:20px;" class="radioclass input" value="1">
              </div>

css:

.piaochecked {
width: 20px;
height: 20px;
float: left;
cursor: pointer;
margin-left: 10px;
text-align: center;
background-image: url(images/checkbox_01.gif);
background-repeat: no-repeat;
background-position: 0 0;
}

.on_check {
background-position: 0 -21px;
}
.radioclass {
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}

js的點擊切換效果很簡單,我這里就不寫了,關鍵是思路,希望對您有幫助!

js點擊切換效果我這里簡單的寫一下:

關于radio:

因為radio選中,下一個會失去選中效果,一個組內,name設置成一樣的,我們基本上只是改變css的class就可以了。

假如一個組內,所有radio的父級span都有上面寫的pay_list_c1 那么js可以這么寫

$(".pay_list_c1").on("click",function(){
  $(this).addClass("on").siblings().removeClass("on");
})

關于checkbox:

因為是可以多選的,所以對其class做toggle就可以了,因為jquery新版本已經廢棄了toggle事件,只保留toggle方法。所有我們要自己寫toggle寫法如下:

注:默認input checkbox的選中狀態和外面父級的div的class是一致的。

$(".piaochecked").on("click",function(){
    $(this).hasClass("on_check")? $(this).removeClass("on_check"):$(this).addClass("on_check");
   //或者這么寫
  // $(this).toggleClass( "on_check" );
})

無js,純css樣式美化

思路:label結合input的checkbox和radio進行美化

原理:

1、label for input的id,可以實現點擊label,使input選中或者取消選中的效果

2、用label包裹input,可以實現點擊label,使input 選中或者取消選中。

知道了這個原理之后,和上面一樣,用label把input包裹起來,然后把input隱藏,添加一個span等行內元素,控制這個行內元素樣式就可以了。

input[type="checkbox"]:checked+span{}

就可以通過點擊label,來達到選中和不選中的效果,達到了美化input checkbox的作用!

案例如下:

html代碼:

<label><input type="checkbox"><span></span></label>

css代碼:

input[type="checkbox"]{appearance: none; -webkit-appearance: none;outline: none;display:none}
label{width:100px;height:100px;display:inline-block;cursor:pointer;}
label input[type="checkbox"] + span{width:20px;height:20px;display:inline-block;background:url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/checkbox_01.gif)  no-repeat;background-position:0 0;}
label input[type="checkbox"]:checked + span{background-position:0 -21px}

label是點擊區域,我故意把點擊區域放大了,大家可以看一下!

radio 和checkbox原理一樣,大家可以自己實現一下!

相關文章:

任选9场吧