我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
这是最简单的方法,你可以选择哪个复选框来提供这种样式。
CSS:
.check-box input {
display: none;
}
.check-box span:before {
content: ' ';
width: 20px;
height: 20px;
display: inline-block;
background: url("unchecked.png");
}
.check-box input:checked + span:before {
background: url("checked.png");
}
HTML:
<label class="check-box">
<input type="checkbox">
<span>Check box Text</span>
</label>
其他回答
从我的谷歌,这是最简单的方法复选框样式。只需根据您的设计添加:after和:checked:after CSS。
body{ background: #DDD; } span{ margin-left: 30px; } input[type=checkbox] { cursor: pointer; font-size: 17px; visibility: hidden; position: absolute; top: 0; left: 0; transform: scale(1.5); } input[type=checkbox]:after { content: " "; background-color: #fff; display: inline-block; color: #00BFF0; width: 14px; height: 19px; visibility: visible; border: 1px solid #FFF; padding: 0 3px; margin: 2px 0; border-radius: 8px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16); } input[type=checkbox]:checked:after { content: "\2714"; display: unset; font-weight: bold; } <input type="checkbox"> <span>Select Text</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>
由于像Edge和Firefox这样的浏览器不支持:before:after on复选框输入标签,这里有一个纯HTML和CSS的替代方案。当然,您应该根据您的要求编辑CSS。
让复选框的HTML像这样:
<div class='custom-checkbox'>
<input type='checkbox' />
<label>
<span></span>
Checkbox label
</label>
</div>
为复选框应用此样式可更改颜色标签
<style>
.custom-checkbox {
position: relative;
}
.custom-checkbox input{
position: absolute;
left: 0;
top: 0;
height:15px;
width: 50px; /* Expand the checkbox so that it covers */
z-index : 1; /* the label and span, increase z-index to bring it over */
opacity: 0; /* the label and set opacity to 0 to hide it. */
}
.custom-checkbox input+label {
position: relative;
left: 0;
top: 0;
padding-left: 25px;
color: black;
}
.custom-checkbox input+label span {
position: absolute; /* a small box to display as checkbox */
left: 0;
top: 0;
height: 15px;
width: 15px;
border-radius: 2px;
border: 1px solid black;
background-color: white;
}
.custom-checkbox input:checked+label { /* change label color when checked */
color: orange;
}
.custom-checkbox input:checked+label span{ /* change span box color when checked */
background-color: orange;
border: 1px solid orange;
}
</style>
你可以使用iCheck。它是为jQuery和Zepto定制的复选框和单选按钮,也许它会对您有所帮助。
确保在iccheck .js之前加载jQuery v1.7+
Choose a color scheme, there are 10 different styles available: Black — minimal.css Red — red.css Green — green.css Blue — blue.css Aero — aero.css Grey — grey.css Orange — orange.css Yellow — yellow.css Pink — pink.css Purple — purple.css Copy /skins/minimal/ folder and icheck.js file to your site. Insert before in your HTML (replace your-path and color-scheme): <link href="your-path/minimal/color-scheme.css" rel="stylesheet"> <script src="your-path/icheck.js"></script> Example for a Red color scheme: <link href="your-path/minimal/red.css" rel="stylesheet"> <script src="your-path/icheck.js"></script> Add some checkboxes and radio buttons to your HTML: <input type="checkbox"> <input type="checkbox" checked> <input type="radio" name="iCheck"> <input type="radio" name="iCheck" checked> Add JavaScript to your HTML to launch iCheck plugin: <script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal', increaseArea: '20%' // Optional }); }); </script> For different from black color schemes use this code (example for Red): <script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_minimal-red', radioClass: 'iradio_minimal-red', increaseArea: '20%' // Optional }); }); </script> Done
我更喜欢使用图标字体(如fontawesme),因为它很容易用CSS修改它们的颜色,而且它们在高像素密度的设备上缩放得非常好。这里是另一个纯CSS变体,使用类似于上面的技术。
(下面是一个静态图像,这样你可以可视化结果;请参阅JSFiddle的交互式版本。)
与其他解决方案一样,它使用label元素。相邻的span保存复选框字符。
span.bigcheck-target { font-family: FontAwesome; /* Use an icon font for the checkbox */ } input[type='checkbox'].bigcheck { position: relative; left: -999em; /* Hide the real checkbox */ } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */ } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\f046"; /* fontawesome checked box (fa-check-square-o) */ } /* ==== Optional - colors and padding to make it look nice === */ body { background-color: #2C3E50; color: #D35400; font-family: sans-serif; font-weight: 500; font-size: 4em; /* Set this to whatever size you want */ } span.bigcheck { display: block; padding: 0.5em; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <span class="bigcheck"> <label class="bigcheck"> Cheese <input type="checkbox" class="bigcheck" name="cheese" value="yes" /> <span class="bigcheck-target"></span> </label> </span>
这是它的JSFiddle。