html中怎么设置checkbox点击打钩框的背景颜色
3个回答
展开全部
正好最近弄了这个
<!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>
<!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>
展开全部
设置两个css 一个是选中的样式 一个是默认的样式
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2016-04-24 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
关注
展开全部
.className:checked{
outline: 1px solid red;
}
outline: 1px solid red;
}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询