DIV+CSS中復(fù)選框的背景顏色不顯示，但是邊框顯示，為什么？

原生的checkbox樣式不能滿足咱們的需求。所以換種方式美化一下

成都創(chuàng)新互聯(lián)一直秉承“誠信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、成都網(wǎng)頁設(shè)計(jì)、成都微信小程序、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、成都app開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來見證！

首先，我們需要把checkbox的透明度設(shè)置為0： opacity: 0; 然后我們需要用到span，作為checkbox的選中狀態(tài)顯示。接著span一個(gè)背景icon，然后根據(jù)icon的分辨率尺寸大小設(shè)置背景圖片的一些屬性，關(guān)鍵是它: background-position-y: 20px;，目的是：當(dāng)checkbox 未選中的時(shí)候，讓背景圖片挪到一個(gè)我們看不見的地方去，當(dāng)checkbox 選中的時(shí)候，讓背景圖片再挪回來，也就是重置為0：background-position-y: 0px;，剩下的就是給它一個(gè)過渡效果，用戶體驗(yàn)就更好啦，最后這樣就達(dá)到我們的目的啦，具體代碼如下：

完整代碼：

!DOCTYPE html

html

head

meta charset="UTF-8"

titlecheckbox美化/title

/head

style type="text/css"

#remember-password-container {

width: 80px;

height: 24px;

position: absolute;

top: 50%;

left: 50%;

margin:-12px 0 0 -40px ;

text-align: center;

}

#remember-password-container .remember-password-content {

position: relative;

}

#remember-password-container input[type=checkbox]{

width: 16px;

height: 16px;

position: absolute;

opacity: 0;

cursor: pointer;

z-index: 2;

font-size: initial;

}

#remember-password-container .remember-me-label {

color: #000;

margin-left: 25px;

cursor: pointer;

}

#remember-password-container .remember-me-label::selection{

background: rgba(0,0,0,0);

}

#remember-password-container span {

position: absolute;

top: 4px;

width: 14px;

height: 14px;

border: 1px solid #d6d6d6;

border-radius: 3px;

background: url(img/fork_green.png);

background-size: 14px;

background-repeat: no-repeat;

background-position-x: 0px;

background-position-y: 20px;

-webkit-transition: background-position-y 0.1s linear;

-o-transition: background-position-y 0.1s linear;

transition: background-position-y 0.1s linear;

}

#remember-password-container input[type=checkbox]:checked+span {

background-position-y: 0px;

}

/style

body

div id="remember-password-container"

div class="remember-password-content"

input type="checkbox" id="remember-me-checkbox"

span/span

label class="remember-me-label" for="remember-me-checkbox"記住我 /label

/div

/div

/body

/html

如何創(chuàng)建CSS3動(dòng)畫復(fù)選框

簡單的動(dòng)畫”復(fù)選框

設(shè)置HTML創(chuàng)建一個(gè)標(biāo)準(zhǔn)的無序列表（為了方便測試，特別復(fù)制出一份代碼）

ul

li

input type="checkbox" name="manager" id="manager" /

label for="manager"Project Manager/label

/li

li

input type="checkbox" name="webdesigner" id="webdesigner" /

label for="webdesigner"Web Designer/label

/li

li

input type="checkbox" name="webdev" id="webdev" /

label for="webdev"Web Developer/label

/li

li

input type="checkbox" name="seo" id="seo" /

label for="seo"SEO/label

/li

li

input type="checkbox" name="itstaff" id="itstaff" /

label for="itstaff"IT Staff/label

/li

li

input type="checkbox" name="csr" id="csr" /

label for="csr"Customer Service Representative/label

/li

/ul

首先，隱藏復(fù)選框

/* Hide the Ordinary Checkbox */

input[type="checkbox"] {

display: none;

}

然后需要在我們的列表和標(biāo)簽標(biāo)記的相對位置和填充設(shè)置一些樣式。

下一步需要使用偽代碼在標(biāo)簽之前和之后設(shè)置樣式。對于這部分，我們將設(shè)置復(fù)選框Font Awesome，用一個(gè)矢量圖標(biāo)。

/* Checkbox Icons */

label {

position: relative;

padding-left: 30px;

font-size: 30px;

cursor: pointer;

color: #fff;

padding: 16px 28px 0 0;

}

label:before, label:after {

font-family: FontAwesome;

font-size: 50px;

/*absolutely positioned*/

position: absolute; top: 0; left: -49px; right: 10px;

}

現(xiàn)在我們需要設(shè)置圖標(biāo)步驟之前和之后的復(fù)選框。

label:before {

content: '\f096'; /*checkbox unchecked */

}

label:after {

content: '\f00c'; /*checkbox checked*/

max-width: 0;

overflow: hidden;

opacity: 0.5;

font-size: 27px;

top: 16px;

left: -42px;

color: #f2ca27;

-webkit-transition: all 0.50s;

-moz-transition: all 0.50s;

-o-transition: all 0.50s;

transition: all 0.50s;

}

最后一步是設(shè)定一個(gè)目標(biāo)，文本框和復(fù)選框后的偽代碼，并給它一個(gè)最大寬度25像素之間和不透明度1。

/* Animating the Checkbox Icon */

input[type="checkbox"]:checked + label:after {

max-width: 25px;

opacity: 1;

margin-right: 90px;

}

可以用css3改變復(fù)選框的背景色和勾上的顏色嗎 一定要用js？

用css3可以直接用圖片作為背景就可以了，不需要用js。解決方法如下：

1、雙擊打開HBuilderX開發(fā)工具，在Web項(xiàng)目中新建靜態(tài)頁面canvas.html。

2、打開已新建的canvas.html文件，修改title標(biāo)簽里的文字內(nèi)容。

3、在body/body標(biāo)簽內(nèi)，插入一個(gè)canvas標(biāo)簽，并設(shè)置id屬性值。

4、在canvas標(biāo)簽下，添加script標(biāo)簽并初始化canvas對象，調(diào)用自帶的方法。

5、保存代碼并運(yùn)行項(xiàng)目，打開瀏覽器查看界面效果，可以發(fā)現(xiàn)繪制了一條線。

6、在style標(biāo)簽中，利用ID選擇器設(shè)置canvas樣式，添加背景色設(shè)置。

7、再次保存代碼文件，并刷新瀏覽器，可以看到canvas畫布背景色發(fā)生了改變。

本文名稱：css復(fù)選框樣式,css單選框樣式
標(biāo)題網(wǎng)址：http://chinadenli.net/article49/dsijohh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、服務(wù)器托管、定制網(wǎng)站、企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)