时间戳

首页 > 解决方案 > 我如何对单独的单独应用按钮列表（在检查一个按钮时）效果？

html - 我如何对单独的单独应用按钮列表（在检查一个按钮时）效果？

问题描述

我想要做的是让用户在整个评分范围内单击任何数字（每个数字都作为单选按钮），并且只在该数字周围设置设计的背景颜色。但是，正如我在下面演示的那样，例如，当用户单击 #1 时，它会更改刻度中每个单选按钮的背景颜色。我如何将它应用于每个人？

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>

        body{
            margin: 0px;
            padding: 0px;
            background-color: bisque;
            overflow: hidden;
        }

        .head{
            text-align: center;
            transform: translate(20px, 150px);
            }

        .rating{
            transform: translate(320px, 200px);   
        }

        .rating label{
            cursor: pointer;
            margin-right: 30px;
            border: 1px solid #000;
            border-radius: 25px;
            padding: 5px 10px;
            background-color: white;
        }

        .rating input{
                display: none;
            }

        .labels{
            display: flex;
            list-style: none; 
        }

        input#rate1:checked ~ label{
            background-color: blue;
        }

        .bottom{
            transform: translate(300px, 150px);
        }
        </style>
    </head>
    <body>
        <div class="head">
            <h1>On a Scale From 0-10, How Are You Feeling?</h1>
        </div>
        <div class="labels">
            <ul>
                <li>Rock Bottom</li>
                <li>Terrible</li>

            </ul>
        </div>
        <div class="rating">
            <input type="radio" name="rating" id="rate0"><label for="rate0"
            >0</label>
            <input type="radio" name="rating" id="rate1"><label for="rate1"
            >1</label>
            <input type="radio" name="rating" id="rate2"><label for="rate2"
            >2</label>
            <input type="radio" name="rating" id="rate3"><label for="rate3"
            >3</label>
            <input type="radio" name="rating" id="rate4"><label for="rate4"
            >4</label>
            <input type="radio" name="rating" id="rate5"><label for="rate5"
            >5</label>
            <input type="radio" name="rating" id="rate6"><label for="rate6"
            >6</label>
            <input type="radio" name="rating" id="rate7"><label for="rate7"
            >7</label>
            <input type="radio" name="rating" id="rate8"><label for="rate8"
            >8</label>
            <input type="radio" name="rating" id="rate9"><label for="rate9"
            >9</label>
            <input type="radio" name="rating" id="rate10"><label for="rate10"
            >10</label>

            <div class="bottom">
                <a href="index.html"><button class="btn1">Next</button></a> 
            </div>

        </div>

    </body>
</html>

标签： htmlcssradio-button

解决方案

问题是这条规则：

input#rate1:checked ~ label{
   background-color: blue;
}

这种方式你指的是所有的标签label。但是你只需要引用当前的，所以你需要添加相应的属性，像这样：

input#rate1:checked ~ label[for="rate1"]{
   background-color: blue;
}

有必要吗？

body{
            margin: 0px;
            padding: 0px;
            background-color: bisque;
            overflow: hidden;
        }

        .head{
            text-align: center;
            transform: translate(20px, 150px);
            }

        .rating{
            transform: translate(320px, 200px);   
        }

        .rating label{
            cursor: pointer;
            margin-right: 30px;
            border: 1px solid #000;
            border-radius: 25px;
            padding: 5px 10px;
            background-color: white;
        }
       
        .rating input{
                display: none;
            }

        .labels{
            display: flex;
            list-style: none; 
        }
        
        input#rate0:checked ~ label[for="rate0"]{
            background-color: blue;
        }

        input#rate1:checked ~ label[for="rate1"]{
            background-color: blue;
        }
        
         input#rate2:checked ~ label[for="rate2"]{
            background-color: blue;
        }
        
        input#rate3:checked ~ label[for="rate3"]{
            background-color: blue;
        }
        
         input#rate4:checked ~ label[for="rate4"]{
            background-color: blue;
        }
        
        input#rate5:checked ~ label[for="rate5"]{
            background-color: blue;
        }
        
         input#rate6:checked ~ label[for="rate6"]{
            background-color: blue;
        }
        
        input#rate7:checked ~ label[for="rate7"]{
            background-color: blue;
        }
        
         input#rate8:checked ~ label[for="rate8"]{
            background-color: blue;
        }
        
        input#rate9:checked ~ label[for="rate9"]{
            background-color: blue;
        }
        
         input#rate10:checked ~ label[for="rate10"]{
            background-color: blue;
        }
        
        


        .bottom{
            transform: translate(300px, 150px);
        }
<body>
        <div class="head">
            <h1>On a Scale From 0-10, How Are You Feeling?</h1>
        </div>
        <div class="labels">
            <ul>
                <li>Rock Bottom</li>
                <li>Terrible</li>
                
            </ul>
        </div>
        <div class="rating">
            <input type="radio" name="rating" id="rate0"><label for="rate0"
            >0</label>
            <input type="radio" name="rating" id="rate1"><label for="rate1"
            >1</label>
            <input type="radio" name="rating" id="rate2"><label for="rate2"
            >2</label>
            <input type="radio" name="rating" id="rate3"><label for="rate3"
            >3</label>
            <input type="radio" name="rating" id="rate4"><label for="rate4"
            >4</label>
            <input type="radio" name="rating" id="rate5"><label for="rate5"
            >5</label>
            <input type="radio" name="rating" id="rate6"><label for="rate6"
            >6</label>
            <input type="radio" name="rating" id="rate7"><label for="rate7"
            >7</label>
            <input type="radio" name="rating" id="rate8"><label for="rate8"
            >8</label>
            <input type="radio" name="rating" id="rate9"><label for="rate9"
            >9</label>
            <input type="radio" name="rating" id="rate10"><label for="rate10"
            >10</label>

            <div class="bottom">
                <a href="index.html"><button class="btn1">Next</button></a> 
            </div>

        </div>

    </body>

推荐阅读