CSS3複選框樣式

我對複選框樣式沒有經驗。無論如何，在複選框上實現邊框半徑效果？我怎樣才能像這樣的圖像樣式複選框？CSS3複選框樣式

enter image description here

2013-09-24 heron

http://www.hongkiat.com/blog/css3-checkbox-radio/ –

使用Google搜索確切的標題，並有幾個很好的選擇。如http://csscheckbox.com/ – Itay

http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css –

HTML

<div class="checkbox"> 
     <input id="check1" type="checkbox" name="check" value="check1"> 
     <label for="check1">Checkbox No. 1</label> 
     <br> 
     <input id="check2" type="checkbox" name="check" value="check2"> 
     <label for="check2">Checkbox No. 2</label> 
    </div>

CSS

label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 25px; 
    margin-right: 15px; 
    font-size: 13px; 
    margin-bottom: 10px; 
} 
label:before { 
    content:""; 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottom: 1px; 
    background-color: #aaa; 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
    border-radius: 3px; 
} 
input[type=checkbox] { 
    display: none; 
} 
input[type=checkbox]:checked + label:before { 
    content:"\2713"; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); 
    font-size: 15px; 
    color: #f3f3f3; 
    text-align: center; 
    line-height: 15px; 
}

可以看出here。

Fiddle

它應該是什麼樣子的現代瀏覽器。 What it should look like

來源

2013-09-24 04:46:58

http://jsfiddle.net/vGja8/是你張貼的代碼。它不會給任何結果類似於我發佈的圖像 – heron

@heron它確實如此。看到我添加的小提琴。我沒有發佈所有需要的CSS，但我增加了一些。 –

以前的答案或更新都不會給我發佈的圖像提供任何視覺上類似的東西。請重新閱讀我的問題 – heron

<div class="square"> 
<input type="checkbox" value="None" id="square" name="check" /> 
<label for="square"></label></div>

CSS3代碼：

.square label { 
cursor: pointer; 
position: absolute; 
width: 20px; 
height: 20px; 
left: 4px; 
top: 4px; 

-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 0px white; 
border:1px solid lightblue; 

    background: -webkit-linear-gradient(top, white 0%, white 100%); 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d',GradientType=0); } 

    .square label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    width: 9px; 
    height: 5px; 
    background: transparent; 
    top: 4px; 
    left: 4px; 
     border: 3px solid blue; 
     border-top: none; 
    border-right: none; 

    -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
     -ms-transform: rotate(-45deg); 
     transform: rotate(-45deg); } 

.square input[type=checkbox]:checked + label:after { 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
     filter: alpha(opacity=100); 
     opacity: 1; }

我正在修改CSS代碼...檢查

來源

2013-09-24 05:02:34 proxyserver

這裏是你發佈http://jsfiddle.net/6zbX4/1/的代碼。 http://screencast.com/t/FDbB2WJy5L4f爲什麼右邊界看起來像那樣？ – heron

ya。您將背景顏色更改爲white.border顏色爲淺藍色。 – proxyserver

蒼鷺檢查這個修改後的代碼。並添加此屬性border-radius：2px;在方形標籤類中。好 – proxyserver

CSS3複選框樣式

回答

相關問題