选中时更改复选框的颜色答案

【问题标题】：Change color of the checkbox when selected选中时更改复选框的颜色
【发布时间】：2020-09-21 09:53:14
【问题描述】：

我有一个隐藏了输入按钮的复选框。如果复选框被选中，那么复选框的背景颜色将随着鼠标悬停时的变化而变化。我无法做到这一点。代码如下：

.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>

【问题讨论】：

你将如何检查隐藏的复选框？
我希望在选中时更改“数学”的背景，就像悬停时更改一样

标签： javascript php html css forms

【解决方案1】：

给输入复选框一个类名和id

  <input type="checkbox" class="mycheckbox" name="course" value="math" id="changecheck">

把标签改成这个

 <label for="changecheck">Math</label>

使用 CSS 可以更改背景颜色，如下所示：

 .mycheckbox:checked + label:after {
  background-color: red;
     }

【讨论】：