Question

我正在尝试使用before和images创建自定义复选框。我的代码是

<label for="gbx">
    <input type="checkbox" name="gbx" id="gbx">
    <span>12344</span>
</label>

这里的Css代码

input {
    display: none;
}

span:before{
    content: "s";
    display: block;
    background-image: url("3_.png");
    background-repeat: no-repeat;
    width: 20px;
    background-size: cover;
}

input:checked+ span:before{
    content: "vijay";
    display: block;
    background-image: url("2_.png");
    background-repeat: no-repeat;
    width: 20px;
    background-size: cover;
}

但它似乎只有内容存在。如果我减小字体大小图像也减小其大小。为什么呢？

Answer 1

你正在以错误的方式尝试。

＆＃13;

input[type="checkbox"] {visibility:hidden;}
div label:before {content:'';width:10px;height:10px;background:#fff;border:1px solid red; display:inline-block;margin-right:10px;}
div input[type="checkbox"]:checked ~ label:before{background:red;}

.new span:before{content:'';width:10px;height:10px;background:#fff;border:1px solid green; display:inline-block;margin-right:10px;}
.new input[type="checkbox"]:checked ~ span:before {background:green;}

＆＃13;

<div>
  <input type="checkbox" id="working" >
  <label for="working" >For my checkbox</label>
</div>



<label class="new">
  <input type="checkbox">
  <span>2nd way</span>
</label>

＆＃13;

看看这个

Answer 2

构建HTML的方式，您无需分别向for和id提及label和input属性。当HTML结构如下所示时，您需要提及这些：

<label for="gbx"></label>
<input type="checkbox" id="gbx"></input>

但是当你筑巢时，它们不是必需的：

<label>
    <input type="checkbox"></input>
</label>

以下是代码（检查评论）：

input {
  /* don't use display: none */
  position: absolute;
  visibility: hidden;
  z-index: -1;
}
span:before {   
  content: "";
  display: inline-block;
  vertical-align: baseline;
  width: 10px;
  height: 10px;
  border: 1px solid black;
}
:checked + span:before {
  /* no need of mentioning content here again as you alread did in the above code */
  background-color: skyblue;
}

<label>
  <input type="checkbox" name="gbx">
  <span>12344</span>
</label>

复选框使用图像，：标记之前

2 个答案: