自定义input复选框样式

最新推荐文章于 2024-07-06 16:53:09 发布

程序媛董董

最新推荐文章于 2024-07-06 16:53:09 发布

阅读量619

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/weixin_48240390/article/details/118153984

版权

正常的input复选框样式有一丢丢的不符合我们所需要的亚子，哈哈哈在这里插入图片描述
让我们改变一下

input[type="checkbox"] {
  width: 22px;
  height: 22px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 18px;
  position: relative;
}
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff; /* 未选中的背景色 */
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
}
input[type="checkbox"]:checked::before {
  content: "\2713";  /* 是转义的'√'，可自定义 */
  background-color: #0D9BFF; /* 自定义选中的背景颜色 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #0D9BFF;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}