我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
最近我发现了一个很有趣的解决方法。
你可以用appearance: none;关闭复选框的默认样式,然后像这里描述的那样在上面写你自己的样式(例4)。
input[type=checkbox] { width: 23px; height: 23px; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-right: 10px; background-color: #878787; outline: 0; border: 0; display: inline-block; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } input[type=checkbox]:focus { outline: none; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } input[type=checkbox]:checked { background-color: green; text-align: center; line-height: 15px; } <input type="checkbox">
不幸的是,浏览器对外观选项的支持很差。从我的个人测试来看,我只有Opera和Chrome可以正常工作。但是当更好的支持到来或者你只想使用Chrome/Opera时,这将是保持简单的方式。
例子JSFiddle
“我能用吗?”链接
其他回答
警告:在撰写本文时,以下内容是正确的,但与此同时,事情有了进展。
AFAIK现代浏览器使用本机操作系统控件显示复选框,所以没有办法对它们进行样式化。
隐藏输入,并在下一个元素中添加一个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");
}
您可以避免添加额外的标记。这适用于任何地方,除了IE通过设置CSS外观:
输入(type = "复选框"){ -webkit-appearance:没有; -moz-appearance:没有; 外观:无; /*样式复选框*/ 宽度:16 px; 高:16 px; 背景颜色:红色; } 检查输入(type = "复选框"):{ 背景颜色:绿色; } <input type="checkbox" />
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浏览器支持。
这是一个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。