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

【问题标题】：How do I make an effect on a list of radio buttons (when one is checked) apply to each one individually not all of them?我如何对单独的单独应用按钮列表（在检查一个按钮时）效果？
【发布时间】：2020-11-08 11:08:43
【问题描述】：

我想要做的是让用户在整个评分范围内单击任何数字（每个数字都作为单选按钮），并且仅在该数字周围设置设计的背景颜色。但是，正如我在下面演示的那样，例如，当用户单击 #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>

【问题讨论】：

你好。你已经得到了你的问题的答案。请将所提供的任何对您有帮助的答案视为已解决。谢谢！

标签： html css radio-button

【解决方案1】：

问题在于这条规则：

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>

【讨论】：

【解决方案2】：

问题正是用户surgey kuznetsov 所说的：-~。

只需一个 + 即可解决问题并使其非常小。它只选择下一个相邻的兄弟。无需添加几行 css 和标记 - 三行即可完成 -

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:checked + label{
  background-color: blue;
}

.bottom{
  transform: translate(300px, 150px);
}

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

【讨论】：

【解决方案3】：

您可以应用这些技巧来设计您想要的收音机：就是在收音机后面做每个收音机的一个元素，并且收音机的每次外观都没有，然后您可以在显示的这些元素中添加您的样式，并且点击是在收音机上，所以我只是在这里清理您的代码并根据我的理解为您提供解决方案：

#CSS

body {
    margin: 0px;
    padding: 0px;
    background-color: bisque;
    overflow: hidden;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-items: center;
    height: 80vh;
}

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

input {
    -webkit-appearance: none;
}

input:checked+label {
    background-color: rgb(255, 233, 40);
}
/////

#HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styleeee.css">
    <title>Document</title>
</head>

<body>

    <body>
        <div class="labels">
            <ul>
                <li>Rock Bottom</li>
                <li>Terrible</li>

            </ul>
        </div>
        <div class="head">
            <h1>On a Scale From 0-10, How Are You Feeling?</h1>
        </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>
        <div class="bottom">
            <a href="index.html"><button class="btn1">Next</button></a>
        </div>
    </body>
</body>

</html>

【讨论】：