我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
通过使用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演示
其他回答
一个简单而轻量级的模板:
input[type=checkbox] { cursor: pointer; } input[type=checkbox]:checked:before { content: "\2713"; background: #fffed5; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; } input[type=checkbox]:before { content: "\202A"; background: #ffffff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; } <input type="checkbox" checked="checked">checked1<br> <input type="checkbox">unchecked2<br> <input type="checkbox" checked="checked" id="id1"> <label for="id1">checked2+label</label><br> <label for="id2">unchecked2+label+rtl</label> <input type="checkbox" id="id2"> <br>
https://jsfiddle.net/rvgccn5b/
现在只使用CSS就可以改变所有复选框的颜色:
如前所述,当选中复选框时,最近的重音颜色CSS属性用于更改复选框的颜色。 然而,我没有看到其他人提到的是,当复选框未选中时,如果你使用CSS的过滤器属性,你可以改变背景颜色和/或边界。
对于简单的更改,您可以使用亮度将白色背景颜色变深为灰色或黑色,并使用色调旋转可以为边界赋予颜色(至少在Firefox中是这样)。然而,如果你想完全改变背景为任何颜色,你也可以用滤镜来做到这一点,但你必须做一些技巧,你将多个滤镜组合在一起,基于这个问题的方法:如何仅使用CSS滤镜将黑色转换为任何给定的颜色
幸运的是,这种复杂的方法似乎在所有浏览器中都有效,并且您可以使用生成器来计算所需的过滤器:https://codepen.io/jumarjuaton/full/mdJYWYq (这个链接是从白色转换而来的,不像上面链接的问题)
请看下面的例子:
/* Disable 'filters' while checked since they impact 'accent-color'. */ input[type='checkbox']:checked { filter: none; } input[type='radio']:checked { filter: none; } /** * We use 'accent-color' for colors in the checked stated and we use * 'filter' to change the background colors in the unchecked state. */ .red-bg-input { accent-color: red; filter: invert(85%) sepia(83%) saturate(6726%) hue-rotate(360deg) brightness(111%) contrast(111%); } .green-bg-input { accent-color: green; filter: invert(49%) sepia(65%) saturate(7149%) hue-rotate(92deg) brightness(89%) contrast(103%); } .blue-bg-input { accent-color: blue; filter: invert(30%) sepia(99%) saturate(6101%) hue-rotate(202deg) brightness(52%) contrast(136%); } .teal-bg-input { accent-color: teal; filter: invert(58%) sepia(77%) saturate(3139%) hue-rotate(157deg) brightness(89%) contrast(101%) } .dark-input { accent-color: black; filter: brightness(0%) saturate(100) hue-rotate(25deg); } .gray-input { accent-color: purple; filter: brightness(60%) saturate(100) hue-rotate(25deg); } .orange-bg-input { accent-color: orange; filter: invert(63%) sepia(28%) saturate(7249%) hue-rotate(0deg) brightness(103%) contrast(105%); } <input type="checkbox" /> <input type="checkbox" checked/> <input type="radio" /> <input type="radio" checked /> Defaults <br> <input class="red-bg-input" type="checkbox" /> <input class="red-bg-input" type="checkbox" checked/> <input class="red-bg-input" type="radio" /> <input class="red-bg-input" type="radio" checked/> Red <br> <input class="green-bg-input" type="checkbox" /> <input class="green-bg-input" type="checkbox" checked/> <input class="green-bg-input" type="radio" /> <input class="green-bg-input" type="radio" checked/> Green <br> <input class="blue-bg-input" type="checkbox" /> <input class="blue-bg-input" type="checkbox" checked/> <input class="blue-bg-input" type="radio" /> <input class="blue-bg-input" type="radio" checked/> Blue <br> <input class="teal-bg-input" type="checkbox" /> <input class="teal-bg-input" type="checkbox" checked/> <input class="teal-bg-input" type="radio" /> <input class="teal-bg-input" type="radio" checked/> Teal <br> <input class="orange-bg-input" type="checkbox" /> <input class="orange-bg-input" type="checkbox" checked/> <input class="orange-bg-input" type="radio" /> <input class="orange-bg-input" type="radio" checked/> Orange <br> <input class="dark-input" type="checkbox" /> <input class="dark-input" type="checkbox" checked/> <input class="dark-input" type="radio" /> <input class="dark-input" type="radio" checked/> Black/dark <br> <input class="gray-input" type="checkbox" /> <input class="gray-input" type="checkbox" checked/> <input class="gray-input" type="radio" /> <input class="gray-input" type="radio" checked/> Purple + Gray background
使用纯CSS修改复选框样式。这不需要任何JavaScript或HTML操作:
.form input[type="checkbox"]:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\f096"; opacity: 1 !important; margin-top: -25px; appearance: none; background: #fff; } .form input[type="checkbox"]:checked:before { content: "\f046"; } .form input[type="checkbox"] { font-size: 22px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <form class="form"> <input type="checkbox" /> </form>
<!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>
这是一个CSS/HTML的版本,不需要jQuery或JavaScript,简单干净的HTML和真正简单和短的CSS。
这是JSFiddle
http://jsfiddle.net/v71kn3pr/
下面是HTML:
<div id="myContainer">
<input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
<label for="myCheckbox_01_item" class="box"></label>
<label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>
这是CSS
#myContainer {
outline: black dashed 1px;
width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #FFF ;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #F00;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
font: normal 12px arial;
display: inline-block;
line-height: 27px;
vertical-align: top;
margin: 5px 0px;
}
这可以调整为能够有单独的单选或复选框,复选框组和单选按钮组。
这个html/css,将允许你也捕获点击标签,所以复选框将被选中和未选中,即使你只是点击标签。
这种类型的复选框/单选按钮适用于任何形式,完全没有问题。已测试使用PHP, ASP。NET (.aspx), JavaServer Faces和ColdFusion。