我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
CodepenLink
-只需添加CSS属性。不需要添加任何Javascript。
其他回答
这将使虚线边界,以及背景你寻找,同样,如果你想设置一个特定的背景颜色,当勾选时,简单地设置它在适当的地方为你的问题:) 这个解决方案还设置了一个自定义的复选标记图标等。
对于像这样的HTML元素: <input type="checkbox" />
input[type='checkbox']:checked {
background-color: rgb(60,69,77,0.9);
}
input[type='checkbox']:checked:after {
content: '\2713';
color:white;
}
input[type='checkbox']{
background:#ff0000;
text-align: center;
display: table-cell;
vertical-align: middle;
width: 20px !important;
height: 20px !important;
appearance:none;
border-radius:10%;
border: 1px dotted rgb(60,69,77,0.9);
box-shadow: none;
font-size: 1em;
}
通过使用Materialize和一个自定义样式表,你可以实现这样的东西:
CSS代码
.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {
border: 2px solid transparent;
border-bottom: 2px solid #ffd600;
border-right: 2px solid #ffd600;
background: transparent;
}
HTML代码
<label>
<input type="checkbox" class="custom_checkbox" />
<span>Text</span>
</label>
Demo
JSFiddle演示
CSS基本用户界面模块第4级(最终)通过一个叫做重音-颜色的新解决方案增加了对这一点的支持,它实际上非常简单,不像这里的其他答案:
输入{ 强调色:rebeccapurple; } <input type="checkbox" />
简单地设置任何CSS颜色(例如命名值,十六进制代码等)你想作为重音颜色的值,它将被应用。
这目前工作在Chrome (v93+), Edge (v93+), Firefox (v92+), Opera (v79+)和Safari (v15.4+)。
注意:Edge, Chrome和Opera(可能还有Safari;我不能测试)目前也不支持通过rgba()的alpha通道值(rgba()的RGB值仍将“工作”;alpha通道将被浏览器忽略)。有关更多信息,请参阅MDN浏览器支持。
<!DOCTYPE html>
<html>
<style>
/* The container */
.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;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border: 2px solid red;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a white background */
.container input:checked ~ .checkmark {
background-color: white;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid green;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkboxes</h1>
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
</body>
</html>
隐藏输入,并在下一个元素中添加一个before,以创建等价的复选框
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label:before {
content:'';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid #0079bf;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 10px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
background-color:red;
}
input[type="checkbox"]:checked + label:before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}