改变checkbox样式问题

最新推荐文章于 2022-06-06 13:24:29 发布

weixin_30670151

最新推荐文章于 2022-06-06 13:24:29 发布

阅读量141

点赞数

原文链接：http://www.cnblogs.com/Web-Architecture/p/7804079.html

版权

选择1

选择2 选择3 选择4 选择5

<form action="">
  <label for="test">选择1
            <input type="checkbox" id="test">
            <div class="checkboxdiv"></div>
        </label> 选择2
  <input type="checkbox"> 选择3
  <input type="checkbox"> 选择4
  <input type="checkbox"> 选择5
  <input type="checkbox">
</form>

label {
  font-size: 12px;
/*   调整vertical-align的值实现水平对齐 */
  vertical-align: 3px;
}
/* 将默认的样式隐藏，使用另一个div模拟 */
#test {
  display: none;
}

.checkboxdiv {
  width: 30px;
  height: 30px;
  display: inline-block;
    border-radius: 3px;
        border:1px solid #85a2cd;
        margin-right: 10px;
        vertical-align: middle;
}

#test:checked ~.checkboxdiv {
  background-color: red;
}

https://codepen.io/anon/pen/VrmjvG

转载于:https://www.cnblogs.com/Web-Architecture/p/7804079.html