我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
你可以简单地使用appearance:在现代浏览器中没有,这样就没有默认样式,所有的样式都被正确应用:
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 2em;
height: 2em;
border: 1px solid gray;
outline: none;
vertical-align: middle;
}
input[type=checkbox]:checked {
background-color: blue;
}
其他回答
现代无障碍解决方案-使用重音颜色
使用新的重音-颜色属性,并确保满足适当的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>
最近我发现了一个很有趣的解决方法。
你可以用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
“我能用吗?”链接
这将使虚线边界,以及背景你寻找,同样,如果你想设置一个特定的背景颜色,当勾选时,简单地设置它在适当的地方为你的问题:) 这个解决方案还设置了一个自定义的复选标记图标等。
对于像这样的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;
}
使用纯CSS,没有花哨的:before和:after,没有转换,您可以关闭默认外观,然后使用内联背景图像对其进行样式化,如下例所示。这适用于Chrome, Firefox, Safari,现在是Edge (Chromium Edge)。
INPUT[type=checkbox]:focus { outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] { background-color: #DDD; border-radius: 2px; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 17px; height: 17px; cursor: pointer; position: relative; top: 5px; } INPUT[type=checkbox]:checked { background-color: #409fd6; background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; } <form> <label><input type="checkbox"> I Agree To Terms & Conditions</label> </form>
实现简单,易于定制的解决方案
经过大量的搜索和测试,我得到了这个解决方案,它是简单的实现和更容易定制。在此解决方案中:
您不需要外部库和文件 你不需要加 在页面中添加额外的HTML 您不需要更改复选框名称 和id
简单地把流动的CSS放在你的页面顶部,所有的复选框样式将像这样改变:
input[type=checkbox] { transform: scale(1.5); } input[type=checkbox] { width: 30px; height: 30px; margin-right: 8px; cursor: pointer; font-size: 17px; visibility: hidden; } input[type=checkbox]:after, input[type=checkbox]::after { content: " "; background-color: #fff; display: inline-block; margin-left: 10px; padding-bottom: 5px; color: #00BFF0; width: 22px; height: 25px; visibility: visible; border: 1px solid #00BFF0; padding-left: 3px; border-radius: 5px; } input[type=checkbox]:checked:after, input[type=checkbox]:checked::after { content: "\2714"; padding: -5px; font-weight: bold; } <input type="checkbox" id="checkbox1" /> <label for="checkbox1">Checkbox</label>