Peterson Peterson - 1 year ago 64
AngularJS Question

Adding color to label next to radio that is checked in AngularJs

I have a simple angularJs example, where actually I have to show red background to label infront of radio box that is checked. However, I cannot find selected or isChecked property in the input type="radio" selected so I can add CSS based on it.



<script src=""></script>

<body ng-app="myApp" ng-controller="myCtrl">

<p ng-repeat="x in questions">
<input type="radio" id="{{}}" name="{{}}"><label for="{{}}">{{x.value}}</label>

var app = angular.module("myApp", []);
$scope.questions = [


enter image description here
enter image description here

Answer Source

Use the :checked pseudo class to target only if the radio button is checked, then use + selector to select the label following the checked radio button:

input[type="radio"]:checked + label {
    background-color: red;

It seems you are trying to have a different color for each radio button, so I'd recommend instead of giving each radio button a color in the CSS file when it's checked, give the color using inline styling (style="...") and then remove the background for the unchecked (:not(:checked)) radio buttons:

<label for="2" style="background-color: blue;">Blue</label>

input[type="radio"]:not(:checked) + label {
  background-color: transparent !important;