理解，當元素隱藏

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