Question

我有一个隐藏了输入按钮的复选框。如果选中此复选框，则将鼠标悬停时该复选框的背景颜色将发生变化。我无法做到这一点。这是代码：

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

Answer 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;
     }

选中时更改复选框的颜色

1 个答案: