改变颜色和复选框

-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

谢谢你的工作 –

改变颜色和复选框

回答

相关问题