如何使用CSS样式的复选框

下面是一个带有主题支持的示例。这是一种现代的CSS转换方法。绝对不需要JavaScript。

我得到了下面的代码链接在这条评论;在一个相关问题上。

编辑:我添加了单选按钮，maxshuty建议。

2020-05-22 21:41:55

下面是一个带有主题支持的示例。这是一种现代的CSS转换方法。绝对不需要JavaScript。

我得到了下面的代码链接在这条评论;在一个相关问题上。

编辑:我添加了单选按钮，maxshuty建议。

2020-05-22 21:41:55

CodepenLink

-只需添加CSS属性。不需要添加任何Javascript。

2022-12-02 07:00:31

现代无障碍解决方案-使用重音颜色

使用新的重音-颜色属性，并确保满足适当的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>

2019-10-26 12:39:28

最近我发现了一个很有趣的解决方法。

你可以用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

“我能用吗?”链接

2015-12-03 08:24:23

这是一个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。

2014-09-04 03:28:06

如何使用CSS样式的复选框

推荐文章

最新文章

标签