理解，当元素隐藏

Question

我想了解标签如何工作的组合，可以标注工作，元素是如何规定像input[type="type=""]:checked或input[type=""]:unchecked。我有我正努力制定出一个非常基本的example，但我不能让标记可以有复选标记的圆形或正方形，或点击时取消选中。是什么让这个品牌具有这样的前景，并显示出已检查和未检查的状态？标签是否需要宽度和高度？如果是这样，我需要使它成为块级元素。

input[type="checkbox"]{ 
    width:0; 
    heigh:0; 
/* or display:none? */ 
} 
label{ 
    position:relative; 
    width: 20px; 
    height: 20px; 
    cursor: pointer; 
} 
label:before, 
label:after{ 
    font-size:50px; 
} 
label:before{ 
    content: '\f096';/
    //Can be some good example 
} 
label:after{ 
    content: '\f00c'; 
    //Can be some good example 
} 
input[type="checkbox"]:checked{ 
    content:"check" 
    //Can be some good example 
} 
input[type="checkbox"]:unchecked{ 
    content:"x" 
    //Can be some good example 
} 

旁边的标签实现的东西像this，但没有文字，我想根据造型复选框。

Answer 1

你需要让你的复选框，并单击的标签之间的关系（CSS明智），并改变它的内容。使用CSS选择器。例如+或~

在下面的示例中，我使用:before和:after。只有当复选框被选中时才会出现:after。我认为这是你想要的。

重要！ ：您设置相同的id所有checkboxes这是不好的，因为

1. 重复的ID是不写的时候一个很好的做法HTML
2. 你link所有标签相同的checkbox（所有链接到该复选框id为checkbox在下面的例子中都有不同的ids等每个标签链接与它对应的复选框

看到下面的代码

.img-holder{ 
 
    position:relative 
 
} 
 
.checkbox-holder{ 
 
    position:absolute; 
 
    background: #fcfff4; 
 
    margin-top:5px; 
 
    margin-left:10px; 
 
    width:50px; 
 
} 
 
input[type="checkbox"]{ 
 
    width:0; 
 
    height:0; 
 
} 
 
label{ 
 
    position:relative; 
 
    width: 20px; 
 
    height: 20px; 
 
    cursor: pointer; 
 
} 
 
label:before, 
 
label:after{ 
 
    font-size:50px; 
 
} 
 
label:before{ 
 
    border:2px solid red; 
 
    content:""; 
 
    height:20px; 
 
    width:20px; 
 
    border-radius:100%; 
 
    display:inline-block; 
 
    
 
} 
 

 
label:after { 
 
    content:''; 
 
    position:absolute; 
 
    width:10px; 
 
    height:10px; 
 
    border-radius:100%; 
 
    background:green; 
 
    top:-2px; 
 
    left:7px; 
 
    opacity:0; 
 
} 
 
input[type="checkbox"]:checked + label:after { 
 
    opacity:1; 
 
} 
 
input[type="checkbox"]:checked + label:before { 
 
    border-color:green; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-3 img-holder"> 
 
     <div class="checkbox-holder"> 
 
     <input type="checkbox" id="checkbox"> 
 
     <label for="checkbox"> 
 
     </div> 
 
     <img src="https://placeimg.com/300/480/any/grayscale" alt=""> 
 
<!--     <div class="flex-column justify-content-center"> 
 
       <h4 class="add">Added</h4> 
 
       <h4 class="remove">Removed</h4> 
 
      </div> --> 
 
     </div> 
 
      <div class="col-3 img-holder"> 
 
     <div class="checkbox-holder"> 
 
     <input type="checkbox" id="checkbox2"> 
 
     <label for="checkbox2"> 
 
     </div> 
 
     <img src="https://placeimg.com/300/480/any/sephia" alt=""> 
 
<!--     <div class="flex-column justify-content-center"> 
 
       <h4 class="add">Added</h4> 
 
       <h4 class="remove">Removed</h4> 
 
      </div> --> 
 
     </div> 
 
       <div class="col-3 img-holder"> 
 
     <div class="checkbox-holder"> 
 
     <input type="checkbox" id="checkbox3"> 
 
     <label for="checkbox3"> 
 
     </div> 
 
     <img src="https://placeimg.com/300/480/nature/grayscale" alt=""> 
 
<!--     <div class="flex-column justify-content-center"> 
 
       <h4 class="add">Added</h4> 
 
       <h4 class="remove">Removed</h4> 
 
      </div> --> 
 
     </div> 
 
         <div class="col-3 img-holder"> 
 
     <div class="checkbox-holder"> 
 
     <input type="checkbox" id="checkbox4"> 
 
     <label for="checkbox4"> 
 
     </div> 
 
     <img src="https://placeimg.com/300/480/arch/grayscale" alt=""> 
 
<!--     <div class="flex-column justify-content-center"> 
 
       <h4 class="add">Added</h4> 
 
       <h4 class="remove">Removed</h4> 
 
      </div> --> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

您不能更改标签本身的内容，但您可以控制伪元素after和before的内容。您可以添加正方形/圆形的逻辑，其中可以代表检查并取消选中。

input[type='checkbox'] { 
    width: 0; 
    height: 0; 
} 

input[type='checkbox']:checked + label:after { 
    content: "checked"; 
} 

Demo

要回答的评论

你的问题他们是如何做时髦的圆钮，并把一个复选框里面当一个点击？

您可以使用CSS动画。标签中已经有检查符号，但不会在输入框的未勾选状态下显示。当元素被选中时，它会将不透明度更改为1，并以动画方式显示复选框。

input[type='checkbox'] { 
    width: 0; 
    height: 0; 
} 

input[type='checkbox'] + label:after { 
    content: "checked"; 
    opacity: 0; 
    -webkit-transition: all 0.50s; 
    -moz-transition: all 0.50s; 
    -o-transition: all 0.50s; 
    transition: all 0.50s; 
} 

input[type='checkbox']:checked + label:after { 
    opacity: 1; 
} 

Demo

Answer 3

如果你想自定义外观和行为的复选框，你将不得不使用一些诡计。这涉及到使用CSS来隐藏您的复选框，并在选中复选框时绘制一个可变形的框，而不是+ ✔字符。

这里有一个非常简单的例子：

var items = document.getElementsByClassName("item"); 
 

 
for (var i=0; i < items.length; i++) { 
 
    items[i].addEventListener("click", function(){ 
 
     var checkbox = this.querySelector("input[type='checkbox']"); 
 
     checkbox.checked = checkbox.checked ? false : true; 
 
     this.classList.toggle("selected", checkbox.checked); 
 
    }); 
 
}

.item { 
 
    padding: 5px 30px 5px 30px; 
 
    display: block; 
 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
 
} 
 
    
 
.item:hover { 
 
    cursor: pointer; 
 
} 
 
    
 
.checker { 
 
    border-color: #333; 
 
    position: absolute; 
 
    background: #fff; 
 
    width:14px; 
 
    height:14px; 
 
    border: 2px solid #999; 
 
    left: 10px; 
 
    z-index: -5; 
 
    display: block; 
 
} 
 

 
.selected .checker { 
 
    border-color: #2199cb; 
 
} 
 

 
.checker input { 
 
    height: 18px; 
 
    width: 18px; 
 
    opacity: 0; 
 
    border: none; 
 
    background: none; 
 
} 
 

 
.selected .checker:after { 
 
    color: #ef8730; 
 
    width: 16px; 
 
    z-index: 99; 
 
    font-size: 28px; 
 
    margin-top: -40px; 
 
    float: right; 
 
    content: "\2714"; 
 
}

<div class="item"> 
 
    <label class="checker"> 
 
    <input type="checkbox"> 
 
    </label> 
 
    Item 1 
 
</div> 
 
<div class="item selected"> 
 
    <label class="checker"> 
 
    <input type="checkbox" checked> 
 
    </label> 
 
    Item 2 
 
</div> 
 
<div class="item"> 
 
    <label class="checker"> 
 
    <input type="checkbox"> 
 
    </label> 
 
    Item 3 
 
</div>

---

See also this JSFiddle demo