我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
有一种方法可以使用CSS来做到这一点。我们可以(ab)使用label元素并样式化该元素。需要注意的是,这将不适用于Internet Explorer 8及更低版本。
.myCheckbox输入{ 位置:相对; z - index: -9999; } .myCheckbox span { 宽度:20 px; 高度:20 px; 显示:块; 背景:url(“link_to_image”); } .myCheckbox输入:checked + span { 背景:url(“link_to_another_image”); } <label for="test">我的样式化的"复选框"的标签</label> <标签类= " myCheckbox " > <input type="checkbox" name="test" /> < span > < / span > < / >标签
其他回答
现代无障碍解决方案-使用重音颜色
使用新的重音-颜色属性,并确保满足适当的3:1对比度,以确保可访问性。这也适用于单选按钮。
.red-input { 颜色:# 9 d3039; 高度:20 px;/*不需要*/ 宽度:20 px;/*不需要*/ } <input class="red-input" type="checkbox" /> <!—单选按钮示例—> <input class="red-input" type="radio" />
旧的答案,我只建议如果你需要更多的定制比上述提供:
我一直在翻看这些答案,大量的答案只是将可访问性排除在门外,并以多种方式违反WCAG。我添加了单选按钮,因为大多数情况下,当你使用自定义复选框时,你也需要自定义单选按钮。
小提琴:
复选框-纯CSS -免费的第三方库 单选按钮-纯CSS -免费的第三方库 复选框*使用FontAwesome,但可以很容易地与Glyphicons等交换
虽然迟到了,但不知何故,在2019年、2020年和2021年,这仍然很困难,所以我添加了我的三个解决方案,它们易于使用和使用。
这些都是免费的JavaScript,可访问的,和外部库免费*…
如果你想要即插即用,只要复制样式表从fiddles,编辑CSS中的颜色代码,以适应你的需要,并在你的方式。如果需要,可以为复选框添加自定义svg复选标记图标。我为那些不喜欢css的人添加了很多注释。
如果你有很长的文本或一个小的容器,并且在复选框或单选按钮输入下遇到文本换行,那么就像这样转换为div。
更详细的解释: 我需要一个解决方案,不违反WCAG,不依赖于JavaScript或外部库,不打破键盘导航,如标签或空格键选择,允许焦点事件,一个解决方案,允许禁用复选框,既选中和未选中,最后一个解决方案,我可以自定义的复选框的外观,但我想与不同的背景颜色,边界半径,svg背景等。
我结合了@Jan turoironic的回答,想出了我自己的解决方案,看起来效果不错。我已经做了一个单选按钮小提琴,使用了许多相同的代码从复选框,以使此工作与单选按钮。
我仍然在学习无障碍,所以如果我错过了一些东西,请留下评论,我会尽量纠正它。
这是我的复选框的代码示例:
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; } /* Text color for the label */ input[type="checkbox"]+span { cursor: pointer; font: 16px sans-serif; color: black; } /* Checkbox un-checked style */ input[type="checkbox"]+span:before { content: ''; border: 1px solid grey; border-radius: 3px; display: inline-block; width: 16px; height: 16px; margin-right: 0.5em; margin-top: 0.5em; vertical-align: -2px; } /* Checked checkbox style (in this case the background is green #e7ffba, change this to change the color) */ input[type="checkbox"]:checked+span:before { /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */ background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg'); background-repeat: no-repeat; background-position: center; /* The size of the checkmark icon, you may/may not need this */ background-size: 25px; border-radius: 2px; background-color: #e7ffba; color: white; } /* Adding a dotted border around the active tabbed-into checkbox */ input[type="checkbox"]:focus+span:before, input[type="checkbox"]:not(:disabled)+span:hover:before { /* Visible in the full-color space */ box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1); /* Visible in Windows high-contrast themes box-shadow will be hidden in these modes and transparency will not be hidden in high-contrast thus box-shadow will not show but the outline will providing accessibility */ outline-color: transparent; /*switch to transparent*/ outline-width: 2px; outline-style: dotted; } /* Disabled checkbox styles */ input[type="checkbox"]:disabled+span { cursor: default; color: black; opacity: 0.5; } /* Styles specific to this fiddle that you do not need */ body { padding: 1em; } h1 { font-size: 18px; } <h1> NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn </h1> <p>You can easily change the background color, checkbox symbol, border-radius, etc.</p> <label> <input type="checkbox"> <span>Try using tab and space</span> </label> <br> <label> <input type="checkbox" checked disabled> <span>Disabled Checked Checkbox</span> </label> <br> <label> <input type="checkbox" disabled> <span>Disabled Checkbox</span> </label> <br> <label> <input type="checkbox"> <span>Normal Checkbox</span> </label> <br> <label> <input type="checkbox"> <span>Another Normal Checkbox</span> </label>
这将使虚线边界,以及背景你寻找,同样,如果你想设置一个特定的背景颜色,当勾选时,简单地设置它在适当的地方为你的问题:) 这个解决方案还设置了一个自定义的复选标记图标等。
对于像这样的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;
}
最近我发现了一个很有趣的解决方法。
你可以用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
“我能用吗?”链接
不需要JavaScript或jQuery。
简单地改变你的复选框样式。
input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; } <input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>
这是一个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/