改變顏色和複選框

-1

邊境的CSS我需要與背景色複選框白色，沒有曲線改變顏色和複選框

enter image description here

我試圖

.cb { 
 
    background-color: white; 
 
    border: 1px; 
 
}

<input type="checkbox" class="cb">Normal 
 
<input type="checkbox" class="cb">power 
 
<input type="checkbox" class="cb">Admin

，但我不能讓defualt複選框只有這樣才能做像上面的圖片

來源

2016-09-27 Sherin AS

嘗試使用CSS Checkbox配置您的樣式。我想你會得到你最個人的複選框樣式，因爲你可以決定你的複選框的樣式。

Screenshot from the page

來源

2016-09-27 09:57:59 Muli

請[避免鏈接只有答案（http://meta.stackoverflow.com/tags/link-only-answers/info）。答案是「幾乎不超過鏈接到外部網站」[可能會被刪除]（http://stackoverflow.com/help/deleted-answers）。 – Quentin

你是對的，抱歉，我添加了一個註釋和一個截圖，但如果你明白我的意思，請求者應該自己完成他的造型以滿足他的所有需求。 – Muli

-1

我認爲這可以幫助風格您更多的複選框


 
.cb { 
 
    width:50px; 
 
    height:50px; 
 
    position: relative; 
 
    margin: 20px 5px; 
 
    background: white; 
 

 
    label { 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 4px; 
 
    left: 4px; 
 
    cursor: pointer; 
 
    background: linear-gradient(top, #222 0%, #45484d 100%); 
 
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 
 
    &:after { 
 
     content: ''; 
 
     width: 16px; 
 
     height: 16px; 
 
     position: absolute; 
 
     top: 2px; 
 
     left: 2px; 
 
     background: $activeColor; 
 
     background: linear-gradient(top, $activeColor 0%, $darkenColor 100%); 
 
     box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
 
     opacity: 0; 
 
    } 
 
    &:hover::after { 
 
     opacity: 0.3; 
 
    } 
 
    } 
 
    input[type=checkbox] { 
 
    visibility: hidden; 
 
    &:checked + label:after { 
 
     opacity: 1; 
 
    } 
 
    } 
 
}

<input type="checkbox" class="cb">Normal 
 
<br><input type="checkbox" class="cb">power 
 
<br><input type="checkbox" class="cb">Admin

來源

2016-09-27 10:08:03

您將需要隱藏的瀏覽器提供的默認複選框，並顯示自定義複選框。

下面是使用:before僞元素的簡單示例。

.cb { 
 
    display: none; 
 
} 
 
label { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-left: 25px; 
 
    font-size: 16px; 
 
    line-height: 20px; 
 
    margin: 5px; 
 
} 
 
label:before { 
 
    line-height: 20px; 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    position: absolute; 
 
    left: 0; 
 
    background-color: #ffffff; 
 
    border: 1px solid #666666; 
 
} 
 
input[type=checkbox]:checked + label:before, 
 
label:hover:before { 
 
    content: "\2713"; 
 
    color: #666666; 
 
    text-align: center; 
 
    line-height: 16px; 
 
}

<input type="checkbox" class="cb" id="check1"> 
 
<label for="check1">Normal</label> 
 
<br> 
 
<input type="checkbox" class="cb" id="check2"> 
 
<label for="check2">Power</label> 
 
<br> 
 
<input type="checkbox" class="cb" id="check3"> 
 
<label for="check3">Admin</label>

來源

2016-09-27 10:43:13 Pugazh

謝謝你的工作 –

改變顏色和複選框

回答

相關問題