Question

我正在尝试设置单个单选按钮的样式，以便每个选项都以不同的颜色显示。但是，我的代码只允许在添加第三个按钮之前至少有两个相同颜色的按钮。有什么工作吗？这是非工作代码。

<html>
<style>
            label {  
                display: inline-block;  
                cursor: pointer;  
                position: relative;  
                padding-left: 25px;  
                margin-right: 15px;  
                font-size: 13px;  
                }

            input[type=radio] {  
                display: none;  
                }  

            label:before {  
                content: "";  
                display: inline-block;  
                width: 20px;  
                height: 19px;  
                margin-right: 15px;  
                position: absolute;  
                left: 0;  
                bottombottom: 1px;  
                background-color: #FFFFFF;  
                box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
                }  

            label:before {  
                border-radius: 8px;  
                }

            .radio1 input[type=radio]:checked + label:before {  
                content: "\2022";  
                color: #73abfb;  
                font-size: 55px;  
                text-align: center;  
                line-height: 22px;
                }

            .radio2 input[type=radio]:checked + label:before {  
                content: "\2022";  
                color: #f8982d;  
                font-size: 55px;  
                text-align: center;  
                line-height: 22px;
                }

            .radio3 input[type=radio]:checked + label:before {  
                content: "\2022";  
                color: #9cc537;   
                font-size: 55px;  
                text-align: center;  
                line-height: 22px;
                }
</style>

<div class="radio1">  
            <input id="w" type="radio" name="INTAKE" value="w">  
                <label for="w"></label></div>

<div class="radio2">  
            <input id="p" type="radio" name="INTAKE" value="P">     
                <label for="p"></label></div>

<div class="radio3">
            <input id="c" type="radio" name="INTAKE" value="C"> 
                <label for="c"></label></div>

</html>

Answer 1

您可以在广播中使用类color设置.radio3，如下所示：

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 13px;
}
input[type=radio] {
  display: none;
}
label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 19px;
  margin-right: 15px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #FFFFFF;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
label:before {
  border-radius: 8px;
}
.radio1 input[type=radio]:checked + label:before {
  content: "\2022";
  color: #73abfb;
  font-size: 55px;
  text-align: center;
  line-height: 22px;
}
.radio2 input[type=radio]:checked + label:before {
  content: "\2022";
  color: #f8982d;
  font-size: 55px;
  text-align: center;
  line-height: 22px;
}
.radio3 input[type=radio]:checked + label:before {
  content: "\2022";
  color: red;/*here change color*/
  font-size: 55px;
  text-align: center;
  line-height: 22px;
}

<div class="radio1">
  <input id="w" type="radio" name="INTAKE" value="w">
  <label for="w"></label>
</div>
<div class="radio2">
  <input id="p" type="radio" name="INTAKE" value="P">
  <label for="p"></label>
</div>
<div class="radio3">
  <input id="c" type="radio" name="INTAKE" value="C">
  <label for="c"></label>
</div>

另外你必须阅读CSS。我假设您从互联网上复制粘贴此代码。

CSS - 为单个单选按钮设置样式

1 个答案: