給CSS複選框

Question

我是新來的CSS。

我想將CSS複選框顯示在圖像中。

我都試過，但複選框出現在屏幕上，當我選擇的類別之一，那麼它的背景是黃色的。

謝謝。

.radio_toggle { 
 
    float:left; 
 
} 
 

 
.radio_toggle label { 
 
    float:left; 
 
    width:100px; 
 
    overflow:auto; 
 

 
} 
 

 
.radio_toggle label span { 
 
    text-align:center; 
 
    font-size: 15px; 
 
    padding:5px 0px; 
 
    display:block; 
 

 
} 
 

 
.radio_toggle label input { 
 
    position:absolute; 
 
} 
 

 
.radio_toggle .venue { 
 
    background-color:#edf1f2; 
 
    color: #58666e; 
 
    min-height: 100% !important; 
 
    border: thin #ced9db solid; 
 
    border-top-left-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 

 
}

<div class="categories"> 
 
<div class="radio_toggle"> 
 
    <label class="venue" style=""> 
 
     <input type="checkbox" name="toggle"> 
 
     <span>Category</span> 
 
     </label> 
 
    </div> 
 
</div> 
 
<div class="categories"> 
 
    <div class="radio_toggle"> 
 
    <label class="venue" style=""> 
 
     <input type="checkbox" name="toggle"> 
 
      <span>Category</span> 
 
    </label> 
 
    </div> 
 
</div> 
 
<div class="categories"> 
 
    <div class="radio_toggle"> 
 
     <label class="venue" style=""> 
 
      <input type="checkbox" name="toggle"> 
 
       <span>Category</span> 
 
     </label> 
 
    </div> 
 
</div>

Answer 1

要隱藏input，給它display: none;，更新CSS規則

.radio_toggle label input { 
    display: none; 
} 

爲了給按鈕顏色使用:checked選擇，添加CSS規則

.radio_toggle label input:checked + span { 
    color: white; 
    background: gold; 
} 

樣品

.radio_toggle { 
 
    float:left; 
 
} 
 

 
.radio_toggle label { 
 
    float:left; 
 
    width:100px; 
 
    overflow:auto; 
 

 
} 
 

 
.radio_toggle label span { 
 
    text-align:center; 
 
    font-size: 15px; 
 
    padding:5px 0px; 
 
    display:block; 
 

 
} 
 

 
.radio_toggle .venue { 
 
    background-color:#edf1f2; 
 
    color: #58666e; 
 
    min-height: 100% !important; 
 
    border: thin #ced9db solid; 
 
    border-top-left-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 

 
} 
 

 
.radio_toggle label input { 
 
    display: none; 
 
} 
 

 
.radio_toggle label input:checked + span { 
 
    color: white; 
 
    background: gold; 
 
}

<div class="categories"> 
 
<div class="radio_toggle"> 
 
    <label class="venue" style=""> 
 
     <input type="checkbox" name="toggle"> 
 
     <span>Category</span> 
 
     </label> 
 
    </div> 
 
</div> 
 
<div class="categories"> 
 
    <div class="radio_toggle"> 
 
    <label class="venue" style=""> 
 
     <input type="checkbox" name="toggle"> 
 
      <span>Category</span> 
 
    </label> 
 
    </div> 
 
</div> 
 
<div class="categories"> 
 
    <div class="radio_toggle"> 
 
     <label class="venue" style=""> 
 
      <input type="checkbox" name="toggle"> 
 
       <span>Category</span> 
 
     </label> 
 
    </div> 
 
</div>

Answer 2

你可以做到這一點使用2種方法。

使用JavaScript或CSS。

對於CSS，它非常簡單。您必須使用:checked屬性。

.radio_toggle[type=checkbox] + label { 
    // Code on how to look before checked 
} 
input[type=checkbox]:checked + label { 
    // Code on how to look after checked 
} 

對於JS你首先必須使用獲得radio_toggle元素，然後聽，如果是檢查這對於你的情況會是這個樣子

var element = document.getElementsByClassName("radio_toggle").checked = true; 
function check(element) { 
    element.checked = true; 
    element.style.color = "Color you desire" 

} 

Answer 3

正如指出的@UnknownDeveloper，你必須使用JavaScript爲。 創建一個新班級.venue_selected並給你想要的顏色。然後對所有元素使用單擊事件添加類來標記並檢查相應的複選框。

<style type="text/css"> 
    .radio_toggle { 
     float:left; 
    } 

    .radio_toggle label { 
     float:left; 
     width:100px; 
     overflow:auto; 

    } 

    .radio_toggle label span { 
     text-align:center; 
     font-size: 15px; 
     padding:5px 0px; 
     display:block; 

    } 

    .radio_toggle label input { 
     position:absolute; 
    } 

    .radio_toggle .venue { 
     background-color:#edf1f2; 
     color: #58666e; 
     /*min-height: 100% !important;*/ 
     border: thin #ced9db solid; 
     border-top-left-radius: 3px; 
     border-bottom-left-radius: 3px; 
     cursor: pointer; 
    } 

    .radio_toggle .venue_selected{ 
     background: #f9d342 !important; 
     color: #ffffff !important; 
    } 

    .categories input[type="checkbox"] { 
     display: none; 
    } 
</style> 

<div class="categories"> 
    <div class="radio_toggle"> 
     <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label> 
    </div> 
</div> 

<div class="categories"> 
    <div class="radio_toggle"> 
     <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label> 
    </div> 
</div> 

<div class="categories"> 
    <div class="radio_toggle"> 
     <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label> 
    </div> 
</div> 

<script type="text/javascript"> 
    var elms = document.querySelectorAll("label.venue"); 
    elms.forEach(function(el,i) { 
     el.onclick = function() { 
      console.log(el); 
      el.classList.toggle("venue_selected"); 
      el.querySelector("input[type='checkbox']").click();  
     }  
    }); 
</script>