css 实现checkbox 选中 显示红色对钩,如何实现?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 实现checkbox 选中 显示红色对钩,如何实现?相关的知识，希望对你有一定的参考价值。
这个单纯使用css是无法实现的。
一般的话，我们实现这个效果是通过将checkbox的visibility设置为hidden，然后为checkbox添加label，对label进行样式设置，图片替换来实现你需要的效果。
建议将label里面内容替换为图片提升兼容性。
<!DOCTYPE html><html>
<head>
<style type="text/css">
#checkbox-1
display: none;
visibility:hiiden;
#checkbox-1 + label
color: blue;
#checkbox-1:checked + label
color: red;
</style>
</head>
<body>
<p><input type="checkbox" id="checkbox-1"><label for="checkbox-1">✔☑</label></p>
</body>
</html> 参考技术A <style type="text/css"> .label_on border:2px solid red; <///对div#checkbox下的input[checkbox]进行遍历 var ifchecked=$("#本回答被提问者采纳 参考技术B <style type="text/css">
.label_on border:2px solid red;
也可以用图片代替的奥
直接用图片代替是最好的做法
以上是关于css 实现checkbox 选中 显示红色对钩,如何实现?的主要内容，如果未能解决你的问题，请参考以下文章
DIV+CSS中复选框的背景颜色不显示，但是边框显示，为啥？
delphi DBGridEh的checkbox怎么实现勾选即代表选中这一行