欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS自定義綠色復(fù)選框按鈕樣式

  發(fā)布時(shí)間：2016-03-04 16:52:33   作者：佚名   我要評(píng)論
這篇文章主要為大家分享一款CSS自定義綠色復(fù)選框按鈕樣式，

HTML自帶的復(fù)選框或者單選框按鈕樣式都是比較簡(jiǎn)單的一種. 而有時(shí)候這些表單控制, 可能需要配合自己的主題樣式. 需要去美化他們. 以前可能需要借助JS的實(shí)現(xiàn). 現(xiàn)在CSS也可以完全實(shí)現(xiàn)我們想要的效果.

效果圖:

我們直奔主題. 首先想到的是, 復(fù)選框需要的是一個(gè)背景色, 然后就是一個(gè)復(fù)選框選中的狀態(tài).選中狀態(tài)我們這里用 "勾號(hào)" 來表示. HTML就可以簡(jiǎn)單的表示了

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="i-check">  
  2.        <input type="checkbox" value="0" />  
  3.        <label></label>  
  4. </div>  

.i-check 作為整體的復(fù)選框.加入的CSS代碼也簡(jiǎn)單

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .i-check {   
  2.     width: 20px;   
  3.     height: 20px;   
  4.     position: relative;   
  5.     margin: 20px auto;   
  6. }  

復(fù)選框的大小根據(jù)自己的需要而定. 這里設(shè)置margin, 是為了顯示在瀏覽器的中間.
然后就是設(shè)定復(fù)選框的默認(rèn)狀態(tài), 這里利用label來設(shè)置, 其高度和寬度都與.i-check設(shè)置一樣, 然后給其一個(gè)背景色,設(shè)置好他的位置.

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .i-check label {   
  2.    width: 20px;   
  3.    height: 20px;   
  4.    cursor: pointer;   
  5.    position: absolute;   
  6.    top: 0;   
  7.    left: 0;   
  8.    background: #1A9909;   
  9.    border-radius: 4px;   
  10.   

默認(rèn)狀態(tài)我們已經(jīng)弄好了. 我們繼續(xù)分析, 那這時(shí)候需要的是一個(gè)選中狀態(tài), 選中狀態(tài)剛已經(jīng)講過用一個(gè)勾號(hào)表示, 這里我們利用偽類after來設(shè)置,設(shè)置其邊框,及旋轉(zhuǎn)這個(gè)after, 就變成了勾號(hào).但是默認(rèn)狀態(tài)勾號(hào)是隱藏的, 所以我們用了opacity為0.

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .i-check  label:after {   
  2.     content: '';   
  3.     width: 9px;   
  4.     height: 5px;   
  5.     position: absolute;   
  6.     top: 4px;   
  7.     left: 4px;   
  8.     border: 3px solid #fff;   
  9.     border-top: none;   
  10.     border-right: none;   
  11.     background: transparent;   
  12.     opacity: 0;   
  13.     transform: rotate(-45deg);   
  14. }   
  15.   

好了, 整個(gè)狀態(tài)設(shè)置好了. 現(xiàn)在需要在點(diǎn)擊復(fù)選框的時(shí)候讓勾號(hào)顯示出來.下面的代碼就可以完成

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .i-check input[type=checkbox]:checked + label:after {   
  2.     opacity: 1;   
  3. }   

寫到這里,不要忘記了, 讓Input復(fù)選框設(shè)置其樣式, 為了讓用戶能夠點(diǎn)擊到, 他的高寬度都要和整體一樣大小, 讓其在整個(gè)盒子的最頂層.這樣用戶就可以能夠隨便在這個(gè)區(qū)域就能點(diǎn)擊. OK , 最后一步就是讓這個(gè)input復(fù)選框隱藏起來, 隱藏起來, 不是讓他真正的隱藏去掉, 這樣的話, 就沒有點(diǎn)擊效果. 這里隱藏需要的是用opacity來設(shè)置為0.

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .i-check input[type=checkbox] {   
  2.     opacity: 0;   
  3.     position: absolute;   
  4.     z-index: 2;   
  5.     left: 0;   
  6.     top: 0;   
  7.     width: 100%;   
  8.     height: 100%;   
  9.     margin: 0;   
  10. }   

好了, 整個(gè)效果就完成了, 同理這個(gè)也可以去設(shè)定單選框的效果。

相關(guān)文章

最新評(píng)論