如何使用不同的背景颜色单选按钮

Question

 input[type='radio'] {
  -webkit-appearance:none;
   width:20px;
   height:20px;
  border:1px solid darkgray;
  border-radius:50%;
  outline:none;
 box-shadow:0 0 5px 0px gray inset;
 }
 input[type='radio']:hover {
  box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;    
 border-radius:50%;    
}
 input[type='radio']:checked:before {
background:orange;
}

CSS

Good selected

图像

我想设置不同的颜色取决于内容

示例：

如果单选按钮radio button color should be red然后Very Good selected

如果单选按钮radio button color should be green然后Excellent selected

如果单选按钮radio button color should be orange然后from bs4 import BeautifulSoup soup = BeautifulSoup(xmla) print (soup.find('abstract')) >>> '<abstract>haha</abstract>'

  

注意：我想在已选中的收音机上更改颜色，这意味着如果选择了单选按钮，则颜色为红色而不是像图像中的橙色

Answer 1

试试这个解决方案：

https://jsfiddle.net/vadimb/n5pjgev6/420/

关键是使用引用变量#name来获取更新表单的当前值：

<label [ng-class]="{good: sel1.checked}">
   <input #sel1 type="radio" name="name1" [(ng-model)]="data.sel1"> Good
</label>

要设置正确的类 - 我们使用ngClass指令从具体的引用变量中获取状态。

Answer 2

使用Angular 2中的ngClass，您可以根据条件将一个类应用于元素，该条件由导致truthy / falsey的表达式指定。

<input type="radio" [value]="items.rateno"  name="{{item.question1}}" ngModel required [ngClass]="{ good: expression, verygood: expression, excellent: expression}" />

我无法从您发布的代码中告诉您哪些表达式会为您提供所需的结果，但您可以通过替换＆＃34;表达式＆＃34;来测试变量的存在。使用变量名称。您还可以测试某个变量的值，例如{cssClass：variable ===＆＃39; string＆＃39;＆＃34;}。

一旦你有一个应用于每个单选按钮的唯一类，只需使用你的CSS来定位这些类：

input[type='radio'].excellent {
   background:orange;
}