html中怎么设置checkbox点击打钩框的背景颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中怎么设置checkbox点击打钩框的背景颜色相关的知识，希望对你有一定的参考价值。
正好最近弄了这个<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:30px;height:30px; display: none;margin: 0px;background-color: red;" id="lable" onclick="lable_click(this);" >
<!--<img width="30px" height="30px" src="xxx.png"> 或者背景图片
(点击无背景的checkbox使它变成成有背景色的对勾，
也可以如果用2个div，一个做没有对勾的背景一个做有对勾的背景，使checked一直处于隐藏状态，每次都用
document.getElementById('checked').checked = false;)或document.getElementById('checked').checked = true;)
使没有显示的checkbox改变它的checked值。
-->
</div>
<input id="checked" type="checkbox" value="" style="width: 30px;height: 30px;display: block;margin: 0px;" onclick ="checkbox_click(this);" />
<script>
function lable_click(obj)
obj.style.display = "none";
document.getElementById('checked').style.display = "block";
document.getElementById('checked').checked = false;//
function checkbox_click(obj)
obj.style.display = "none";
document.getElementById('lable').style.display = "block";
</script>
</body>
</html> 参考技术A 设置两个css 一个是选中的样式 一个是默认的样式 参考技术B .className:checked
outline: 1px solid red;
本回答被提问者采纳
以上是关于html中怎么设置checkbox点击打钩框的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章
WPF checkbox 怎么实现 无论怎么点击 勾选框一直都不打钩
firefox中 checkbox属性checked="checked"已有，但复选框却不显示打钩的原因
qt4.8.3中checkbox的大小如何改变？不是整个checkbox的尺寸，是中间那个打钩的小方块的尺寸。
HTML ionic 中 checkbox 的复选框 用css 如何改变外框的颜色