css怎么做打勾的方框

這個得用Html做的

成都創(chuàng)新互聯(lián)公司是一家專注于做網(wǎng)站、網(wǎng)站設(shè)計與策劃設(shè)計,江蘇網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:江蘇等地區(qū)。江蘇做網(wǎng)站價格咨詢:028-86922220

form?action=""?method="get"

您喜歡的水果？br?/

labelinput?name="Fruit"?type="checkbox"?value="0"?/蘋果?/label

labelinput?name="Fruit"?type="checkbox"?value="1"?/桃子?/label

labelinput?name="Fruit"?type="checkbox"?value="2"?/香蕉?/label

labelinput?name="Fruit"?type="checkbox"?value="3"?/梨?/label

/form

怎么用css樣式替換checkbox的勾選樣式

給你看一段超炫的CSS3代碼：是關(guān)于checkbox的。

style

*{

margin:0;

padding:0;

}

body{

background-color:#202838;

}

.switch{

width:180px;

height:55px;

position:relative;

margin:100px?auto;

}

.switch?input{

filter:?alpha(opacity=0);

opacity:?0;

z-index:?100;

position:?absolute;

width:?100%;

height:?100%;

cursor:?pointer;

}

.switch?label{

display:block;

width:80%;

height:100%;

position:?relative;

background:?linear-gradient(#121823,?#161d2b);

border-radius:?30px?30px?30px?30px;

box-shadow:

???inset?0?3px?8px?1px?rgba(0,0,0,0.5),

???inset?0?1px?0?rgba(0,0,0,0.5),

???0?1px?0?rgba(255,255,255,0.2);

-webkit-transition:?all?0.5s?ease;

transition:?all?0.5s?ease;

}

.switch?label?i{

display:block;

width:51px;

height:51px;

position:absolute;

left:2px;

top:2px;

z-index:2;

border-radius:50%;

background:?linear-gradient(#36455b,?#283446);

box-shadow:

inset?0?1px?0?rgba(255,255,255,0.2),

0?0?8px?rgba(0,0,0,0.3),

0?12px?12px?rgba(0,0,0,0.4);

-webkit-transition:?all?0.5s?ease;

transition:?all?0.5s?ease;

}

.switch?span?{

content:?"";

display:?inline-block;

position:?absolute;

right:?0px;

top:?17px;

width:?18px;

height:?18px;

border-radius:?10px;

background:?gradient-gradient(#36455b,?#283446);

box-shadow:

inset?0?1px?0?rgba(0,0,0,0.2),

0?1px?0?rgba(255,255,255,0.1),

0?0?10px?rgba(185,231,253,0),

inset?0?0?8px?rgba(0,0,0,0.9),

inset?0?-2px?5px?rgba(0,0,0,0.3),

inset?0?-5px?5px?rgba(0,0,0,0.5);

-webkit-transition:?all?0.5s?ease;

transition:?all?0.5s?ease;

z-index:?2;

}

.switch?input:checked?~?span{

content:?"";

display:?inline-block;

position:?absolute;

width:?18px;

height:?18px;

border-radius:?10px;

-webkit-transition:?all?0.5s?ease;

transition:?all?0.5s?ease;

z-index:?2;

background:?#b9f3fe;?

background:?gradient-gradient(#ffffff,?#77a1b9);

box-shadow:????????

??inset?0?1px?0?rgba(0,0,0,0.1),

??0?1px?0?rgba(255,255,255,0.1),

??0?0?10px?rgba(100,231,253,1),

??inset?0?0?8px?rgba(?61,157,247,0.8),

??inset?0?-2px?5px?rgba(185,231,253,0.3),

??inset?0?-3px?8px?rgba(185,231,253,0.5);

}

.switch?input:checked?~?label?i?{

left:?63%;

box-shadow:

inset?0?1px?0?rgba(255,255,255,0.2),

0?0?8px?rgba(0,0,0,0.3),

0?8px?8px?rgba(0,0,0,0.3),

inset?-1px?0?1px?#b9f3fe;

-webkit-transition:?all?.5s?ease;

transition:?all?.5s?ease;

}

/style

body????

div?class="switch"????

input?type="checkbox"?name="toggle"????

label?for="toggle"i/i/label????

span/span????

/div????

/body

css怎樣改變復(fù)選框的樣式

1、首先，需要添加一段CSS隱藏所有的Checkbox復(fù)選框。要做到點需要添加一段代碼到你的CSS文件中。代碼如下：

/*** 隱藏默認的checkbox***/

input[type=checkbox] {

visibility: hidden;

}

2、開始創(chuàng)建復(fù)選框區(qū)的HTML。代碼如下：

section

!-- Checbox One --

h3Checkbox One/h3

div class="checkboxOne"

input type="checkbox" value="1" id="checkboxOneInput" name="" /

? label for="checkboxOneInput"/label

/div

/section

3、用一個DIV元素包含checkbox，使用它們來做黑色條帶和圓角。代碼如下：

/*** Create the slider bar***/

.checkboxOne {

width: 40px;

height: 10px;

background: #555;

margin: 20px 80px;

position: relative;

border-radius: 3px;

}

4、當(dāng)選中復(fù)選框后的判定代碼。代碼如下

/*** Move the slider in the correct position if the checkbox is clicked**/

.checkboxOne input[type=checkbox]:checked + label {

left: 27px;

}

復(fù)選框選中前。

復(fù)選框選中后。

網(wǎng)站名稱：css勾選樣式,css3樣式選擇器
本文路徑：http://chinadenli.net/article46/dsccheg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、商城網(wǎng)站、網(wǎng)頁設(shè)計公司、企業(yè)網(wǎng)站制作、定制開發(fā)、外貿(mào)建站

廣告

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