CSS 復選框樣式-大小顏色變化

Question

我正在嘗試做簡單的復選框樣式。 顏色變化不起作用。

如何更改顏色和邊框？

 input[type=checkbox]{ height: 25px; width: 25px; background-color: #eee; } input[type=checkbox]:checked { background-color: #3ee738; }

 <p> <input type="checkbox" id="showall" name="showall" value=0>&nbsp; <label for="showall">Show All</label> </p> <p> <input type="checkbox" id="showfl" name="showfl" value=0>&nbsp; <label for="showfl">Filtered</label> </p> <p>

Answer 1

 input[type=checkbox] + label { display: block; margin: 0.2em; cursor: pointer; padding: 0.2em; } input[type=checkbox] { display: none; } input[type=checkbox] + label:before { content: "\2714"; border: 0.1em solid MediumSeaGreen; border-radius: 0.2em; display: inline-block; width: 1em; height: 1em; padding-left: 0.2em; padding-bottom: 0.3em; margin-right: 0.2em; vertical-align: bottom; color: transparent; transition: .2s; } input[type=checkbox] + label:active:before { transform: scale(0); } input[type=checkbox]:checked + label:before { background-color: MediumSeaGreen; border-color: MediumSeaGreen; color: #fff; } input[type=checkbox]:disabled + label:before { transform: scale(1); border-color: #aaa; } input[type=checkbox]:checked:disabled + label:before { transform: scale(1); background-color: #bfb; border-color: #bfb; }

 <p> <input type="checkbox" id="showall" name="showall" value=0>&nbsp; <label for="showall">Show All</label> </p> <p> <input type="checkbox" id="showfl" name="showfl" value=0>&nbsp; <label for="showfl">Filtered</label> </p> <p>

Answer 2

復選框當前無法使用 CSS 設置樣式，因為它們通常基於用戶操作系統的默認樣式。 使用 CSS 解決此問題的方法是設置另一個元素的樣式，在您的情況下， <label>標記用作復選框的視覺指示器，然后一些偽選擇器和偽元素 CSS 在輸入時觸發更改檢查。

因為輸入和 label 通過id和for屬性連接，縮小輸入隱藏它有效地工作並且仍然保持可訪問性。

 li { position:relative; } input { height:1px; width:1px; position:absolute; opacity:0; top:0; left:0; } label { cursor:pointer; padding-left:25px; } label::before { content:""; position:absolute; left:0; top:0; height:15px; width:15px; border:1px solid blue; } label::after { content:""; color:white; position:absolute; left:2px; top:0; } input[type=checkbox]:checked + label::before { background:blue; } input[type=checkbox]:checked + label::after { content:"✓"; }

 <ul> <li><input id="cat" type="checkbox"> <label for="cat">Cat</label></li> <li><input id="dog" type="checkbox"> <label for="dog">Dog</label></li> </ul>

Answer 3

您需要做的是隱藏復選框的實際 html 元素並創建一個可以輕松設置樣式的新元素。

因此，這種方法的邏輯是為框設置一個跨度，為圖標和樣式分別設置一個跨度——在使用:checked偽選擇器檢查輸入時顯示圖標。

請注意，label 環繞整個組，因此單擊 label 上的任意位置將切換復選框 - 這樣做可以消除對屬性的需求。

我還添加了一個已選中的 function，它將在選中 showAll 檢查時切換另一個復選框。

編輯 - 請注意，您可以使用其他方法在其中獲取圖標 - 例如，您可能更喜歡 font awesome fa-check 圖標。

 const showAll = document.querySelector("#showAll"); showAll.addEventListener('click', () => toggleAll()); function toggleAll() { document.querySelector("#showfl").checked = showAll.checked; }

 .checkbox-wrapper { margin-bottom: 16px; } input[type=checkbox]{ display: none }.checkbox-box{ display: inline-block; height: 25px; width: 25px; background-color: #eee; text-align: center }.checkbox-icon { visibility: hidden } input[type=checkbox]:checked +.checkbox-box{ background-color: #3ee738; } input[type=checkbox]:checked +.checkbox-box.checkbox-icon { visibility: visible }

 <div class="checkbox-wrapper"> <label> <input type="checkbox" id="showAll" name="showAll" /> <span class="checkbox-box"> <span class="checkbox-icon">&check;</span> </span> Show All </label> </div> <div class="checkbox-wrapper"> <label> <input type="checkbox" id="showfl" name="showfl" /> <span class="checkbox-box"> <span class="checkbox-icon">&check;</span> </span> Filtered </label> </div>