[英]Change color of the checkbox when selected
我有一個隱藏輸入按鈕的復選框。 如果復選框被選中，那么復選框的背景顏色將隨着鼠標懸停在其上而改變。 我無法做到這一點。 這是代碼：
.btn-grad{ width: 400px; height: 10px; margin-top: 20px; padding: 15px; color: rgb(255, 255, 255); text-align: center; text-decoration: none; background-color: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%); background: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%); border-radius: 5px; border: 1px solid rgb(69, 9, 104); box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5); text-shadow: 0px 1px 3px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0); display: table; position: static; clear: both; }.btn-grad:hover{ background-position: right center; background: linear-gradient(to right top, #e4f0f8, #cfe5fc, #c3d7ff, #c1c8ff, #c9b5fb, #c0b6fd, #b7b6fe, #adb7ff, #8ecaff, #7dd9ff, #82e6f9, #99f0eb); }.btn-grad:checked{ background-color: red; }.btn-grad > input{ display:none; }.btn-grad > div{ font-size:25px; }
<html> <body> <form> <label class="btn-grad" name="math"> <input type="checkbox" name="course" value="math"> <div> MATHS </div> </label>
給輸入復選框一個 class 名稱和 id
<input type="checkbox" class="mycheckbox" name="course" value="math" id="changecheck">
把label改成這個
<label for="changecheck">Math</label>
使用 CSS 可以在檢查時更改背景顏色，如下所示：
.mycheckbox:checked + label:after {
background-color: red;
}
默認情況下選中此復選框時，可即時更改行的背景色
[英]Change background color of a row on the fly when checkbox is selected by default
未選擇任何元素時，請取消選中該復選框。 僅選中一個復選框。 更改relevent div容器的背景顏色。
[英]Uncheck the checkbox when no element is selected. check only one checkbox. change background-color of relevent div container.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.