html中怎么设置checkbox点击打钩框的背景颜色
发布网友
共4个回答
懂视网
本篇文章给大家带来的内容是关于如何利用纯CSS改变html？radio/checkbox默认背景颜色样式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
CSS代码：
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
}
input[type=checkbox]:checked:after {
content: "?";
font-size: 12px;
}
input[type=radio] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=radio]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 50%;
}
input[type=radio]:checked:before {
content: "?";
display: block;
position: relative;
top: -2px;
left: 3px;
width: 6px;
height: 6px;
color: #fff;
font-weight: 400;
z-index: 1;
}HTML 示例：
<input type="checkbox" name="method" value="plus" checked>plus<br> <input type="checkbox" name="method" value="minus">minus<br> <input type="radio" name="method" value="plus">plus<br> <input type="radio" name="method" value="minus" checked>minus<br>
热心网友
正好最近弄了这个
<!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 一个是选中的样式 一个是默认的样式
热心网友
.className:checked{
outline: 1px solid red;
}
