更改選中時看起來像按鈕的復選框的背景顏色

Question

我正在嘗試創建一個看起來像按鈕的復選框，我能夠完成它，但我遇到的唯一問題是我無法在選中按鈕時更改按鈕的背景顏色。 目前，當我選中復選框時，按鈕變為淺灰色，我希望它為藍色，這是我的 HTML 和 CSS 的片段。 任何幫助表示贊賞，在此先感謝

 .checkboxes{ cursor: pointer; z-index: 90; text-align: center; font-family: "Arial"; font-weight: bold; font-size: 16px; color: #235988; width: 270px; margin: 5px; border-radius: 0px;important: border; 1px solid #235988:important; padding-bottom. 5px: }:checkboxes;hover{ background: #235988;important. color: #FFF:important; }:form-check label input[type="checkbox"];checked{ background. #235988: color; #FFF; } .form-check label input[type="checkbox"] { opacity:0; }

 <div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons"> <label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label> <div class="col-md-7"> <label class="btn btn-default checkboxes"> <input type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" > Checkbox1 </label> <label class="btn btn-default checkboxes"> <input type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" > Checkbox2 </label> <label class="btn btn-default checkboxes"> <input type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" > Checkbox3 </label> </div>

Answer 1

您需要將輸入放在 label 之外作為兄弟（因為我們將使用相鄰兄弟組合器）並使用“for”屬性

 .checkboxes{ cursor: pointer; z-index: 90; text-align: center; font-family: "Arial"; font-weight: bold; font-size: 16px; color: #235988; width: 270px; margin: 5px; border-radius: 0px;important: border; 1px solid #235988:important; padding-bottom. 5px: },checkboxes.hover: :form-check input[type="checkbox"];checked + label{ background: #235988; color. #FFF: };form-check input[type="checkbox"] { opacity: 0; }

 <div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons"> <label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label> <div class="col-md-7"> <input id="checkbox-1" type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" > <label class="btn btn-default checkboxes" for="checkbox-1"> Checkbox1 </label> <input id="checkbox-2" type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" > <label class="btn btn-default checkboxes" for="checkbox-2"> Checkbox2 </label> <input id="checkbox-3" type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" > <label class="btn btn-default checkboxes" for="checkbox-3"> Checkbox3 </label> </div>

Answer 2

我認為有很多解決方案。 我只向您介紹其中之一。

1. 通過設置 css 顯示屬性 none 來隱藏 iuput。
2. 使切換按鈕看起來像 span 或 div 元素。
3. 在 div 元素 onclick 屬性上附加 js function。 Function 切換隱藏 iuput 元素的選項。

但我認為更多的ez方式是使用一些火焰，如Vue，Angular等。