无法设置复选框的HTML / CSS样式
[英]Unable to style checkboxes HTML/CSS
问题描述
I'm unable to do any styling whatsoever on some HTML checkboxes. 
我无法在某些HTML复选框上进行任何样式设置。 Any css fails to change the appearance of the checkboxes: 任何CSS均无法更改复选框的外观：
HTML: HTML：
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
<nput type="checkbox" id="checkbox-1-2" class="regular-checkbox" />
<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" />
<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" />
CSS: CSS：
.regular-checkbox {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
Checkbox is unchanged. 复选框未更改。 Can anyone tell me what I'm doing wrong here? 谁能告诉我我在做什么错？ I thought this was possible in CSS. 我认为这在CSS中是可能的。
2 个解决方案
解决方案1
1 2018-11-28 00:05:32
Let me know if it helps or you need some explanation. 让我知道是否有帮助，或者您需要一些解释。
<!DOCTYPE html> <html> <style> .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input~.checkmark { background-color: #ccc; } .container input:checked~.checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked~.checkmark:after { display: block; } .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } </style> <body> <label class="container">One <input type="checkbox"> <span class="checkmark"></span> </label> </body> </html>
解决方案2
0 2018-11-27 23:58:13
It's not possible to style checkbox inputs (nor radios) in css. 无法在CSS中设置复选框输入（或单选）的样式。
But you can create a custom checkbox and add a hidden checkbox or something like that. 但是您可以创建一个自定义复选框并添加一个隐藏的复选框或类似的东西。 Which is what most people do because it can easily be compatible across browsers. 大多数人这样做是因为它可以轻松地跨浏览器兼容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.