本篇文章給大家分享的是有關(guān)CSS中怎么自定義綠色復(fù)選框按鈕樣式，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括下陸網(wǎng)站建設(shè)、下陸網(wǎng)站制作、下陸網(wǎng)頁制作以及下陸網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，下陸網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到下陸省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
首先想到的是, 復(fù)選框需要的是一個(gè)背景色, 然后就是一個(gè)復(fù)選框選中的狀態(tài).選中狀態(tài)我們這里用 "勾號" 來表示. HTML就可以簡單的表示了
XML/HTML Code復(fù)制內(nèi)容到剪貼板
.i-check 作為整體的復(fù)選框.加入的CSS代碼也簡單
CSS Code復(fù)制內(nèi)容到剪貼板
.i-check {
width: 20px;
height: 20px;
position: relative;
margin: 20px auto;
}
復(fù)選框的大小根據(jù)自己的需要而定. 這里設(shè)置margin, 是為了顯示在瀏覽器的中間.
然后就是設(shè)定復(fù)選框的默認(rèn)狀態(tài), 這里利用label來設(shè)置, 其高度和寬度都與.i-check設(shè)置一樣, 然后給其一個(gè)背景色,設(shè)置好他的位置.
CSS Code復(fù)制內(nèi)容到剪貼板
.i-check label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #1A9909;
border-radius: 4px;
默認(rèn)狀態(tài)我們已經(jīng)弄好了. 我們繼續(xù)分析, 那這時(shí)候需要的是一個(gè)選中狀態(tài), 選中狀態(tài)剛已經(jīng)講過用一個(gè)勾號表示, 這里我們利用偽類after來設(shè)置,設(shè)置其邊框,及旋轉(zhuǎn)這個(gè)after, 就變成了勾號.但是默認(rèn)狀態(tài)勾號是隱藏的, 所以我們用了opacity為0.
CSS Code復(fù)制內(nèi)容到剪貼板
.i-check label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fff;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
transform: rotate(-45deg);
}
好了, 整個(gè)狀態(tài)設(shè)置好了. 現(xiàn)在需要在點(diǎn)擊復(fù)選框的時(shí)候讓勾號顯示出來.下面的代碼就可以完成
CSS Code復(fù)制內(nèi)容到剪貼板
.i-check input[type=checkbox]:checked + label:after {
opacity: 1;
}
寫到這里,不要忘記了, 讓Input復(fù)選框設(shè)置其樣式, 為了讓用戶能夠點(diǎn)擊到, 他的高寬度都要和整體一樣大小, 讓其在整個(gè)盒子的最頂層.這樣用戶就可以能夠隨便在這個(gè)區(qū)域就能點(diǎn)擊. OK , 最后一步就是讓這個(gè)input復(fù)選框隱藏起來, 隱藏起來, 不是讓他真正的隱藏去掉, 這樣的話, 就沒有點(diǎn)擊效果. 這里隱藏需要的是用opacity來設(shè)置為0.
CSS Code復(fù)制內(nèi)容到剪貼板
.i-check input[type=checkbox] {
opacity: 0;
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
}
以上就是CSS中怎么自定義綠色復(fù)選框按鈕樣式，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
