Question

我试图通过使用带边框的span并使用css display属性隐藏复选框来设置复选框样式。当我运行上面的代码片段时，它似乎不起作用。我尝试更改为<p>，但它也无效。我点击后希望跨度保持红色。如何使用css实现它？这是我的jsfiddle链接。

编辑1：

我想用span替换一个复选框。我的意思是我需要使用span的相同行为。当我点击跨度颜色时应该变为红色，当我再次点击它时它应该变为正常样式，就像选中并取消选中复选框一样。

http://jsfiddle.net/Lwgv87ea/

input[type="checkbox"] + span:hover{
    border: 1px solid red;
    color: red;
  }

input[type="checkbox"]:checked + span{
    border: 1px solid red;
    color: red;
  }
input[type="checkbox"]{
    display: none;
}

span {
  display: inline-block;
  line-height: 38px;
  font-size: 14px;
  color: #acacac;
  border: 1px solid #acacac;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  }

<label for="clothing_colors">
                  
                  <input type="checkbox" name="clothing-type" value="Standing Collar"><span>Standing Collar</span>
</label>

Answer 1

＆＃13;

input[type="checkbox"] + span:hover {
  border: 1px solid red;
  color: red;
}
input[type="checkbox"]:checked + span {
  border: 1px solid red;
  color: red;
}
input[type="checkbox"] {
  visibility: hidden;
}
span {
  display: inline-block;
  line-height: 38px;
  font-size: 14px;
  color: #acacac;
  border: 1px solid #acacac;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
}

＆＃13;

<label>
  <input type="checkbox" name="clothing-type" value="Standing Collar"><span>Standing Collar</span>

</label>
<label>
  <input type="checkbox" name="clothing-type" value="3/4th Sleeves"><span>3/4th Sleeves</span>

</label>
<label>
  <input type="checkbox" name="clothing-type" value="full sleeves"> <span>Full Sleeves</span>

</label>
<br>
<label>
  <input type="checkbox" name="clothing-type" value="Sleeveless item"><span>Sleeveless item</span>

</label>
<label>
  <input type="checkbox" name="clothing-type" value="Crop tops"><span>Crop Tops</span>

</label>
<label>
  <input type="checkbox" name="clothing-type" value="Crop tops" class="clothing-type"><span class="clothing">Sheer Clothes</span>

</label>
</div>

＆＃13;

您需要从css中删除display:none属性并添加visibility:hidden 您的所有标签都具有相同的属性，这使它们无法正常工作。

这是一个正确的实现 http://jsfiddle.net/drecodeam/Lwgv87ea/2/

Answer 2

单击span标记时，不会检查您的复选框。从您的复选框中删除显示：无，您将看到我的意思。单击span元素时，您需要使用javascript来检查复选框。

Answer 3

我不明白复选框在这里的作用是什么。但是根据你的问题我理解的是你想要一个像复选框一样的跨度。请查看以下代码段。

＆＃13;

$('.checkbox_span').click(function(){

$(this).toggleClass('check');

})

＆＃13;

input[type="checkbox"] + span:hover{
    border: 1px solid red;
    color: red;
  }

.check{
    border: 1px solid red;
    color: red;
  }

input[type="checkbox"]{
  display:none;
  }
span {
  display: inline-block;
  line-height: 38px;
  font-size: 14px;
  color: #acacac;
  border: 1px solid #acacac;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<label for="clothing_colors">
                  
                  <input type="checkbox" name="clothing-type" value="Standing Collar"/>
  <span class="checkbox_span">Standing Collar</span>
</label>

＆＃13;

用span元素替换复选框

3 个答案: