21,886
社区成员
发帖
与我相关
我的任务
分享左右复选框的底色如何做到不同颜色,代码如何修改？
如图，要在一表格里，左边复选框颜色为红色，当点击右边复选框时，右边的复选框颜色为黑色，代码如何修改？请大师指点修改
<style type="text/css">
label::before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
background: #EEE;
vertical-align: middle;
-webkit-border-radius: 50%;
/*margin-right: 1px;*/
-webkit-box-sizing:border-box;
-webkit-transition:background ease-in .5s
}
/*复选框里底的颜色：红色*/
input[type="checkbox"]:checked+label::before{
background-color: #FF00FF;
/*border: 1px #b3b3b3 solid;*/
}
/*若要复选框里底的颜色：黑色
input[type="checkbox"]:checked+label::before{
background-color: #000000;
/*border: 1px #b3b3b3 solid;*/
}
/*自定义复选框checkbox*/
.sex_checkbox{
position: relative;
}
.sex_checkbox input[type="checkbox"]{
display: none;
}
</style>
<body>
<div class="sex_checkbox">
<table width="200" border="2" cellspacing="2" cellpadding="2">
<tr>
<td><input type="checkbox" id="se" value="0" name="sex"><label for="se"></label></td>
<td><input type="checkbox" id="se1" value="0" name="sex"><label for="se1"></label></td>
</tr>
</table> </div>
...全文
请发表友善的回复…
发表回复
php_597 2018-09-02
- 打赏
- 举报
label::before {分两个样式，一个红色class=a1，一个黑色class=a2，
在表格里赋给不同的样式。<td class=a1></td>
<td class=a2></td>
在表格里赋给不同的样式。<td class=a1></td>
<td class=a2></td>
uniapp - 强力覆盖 checkbox 复选框样式，将复选框由方框形状改为圆形、修改里面的 √ 对号大小、填充复选框背景色（改掉默认的 uniapp checkbox 系统内置组件样式）兼容全端