Styling Radio Buttons AND label

[Walter Cook]

Trying to customize the buttons on a radio. Followed this:

https://ej2.syncfusion.com/angular/documentation/radio-button/style-and-appearance/

Implemented this:

.e-radio-wrapper e-wrapper{

  color: yellow;

  background-color: green;

}

.e-radio + label:hover::before{

    color: yellow;

  background-color: green;

}

.e-radio:checked + label::after, e-radio:checked + label::before

{

     color: yellow;

  background-color: green;

}

.e-radio:checked:focus + label::before, .e-radio:checked + label:hover::before{

   color: yellow;

  background-color: green;

}

I get green backgrounds but the outer edge of the circle is still red for the selected radio.

A) how to I change that?

B) how do I change the color of the label itself (“Option 1” “This button’s label” etc)

Thanks

[Gayathri KarunaiAnandam]

Hi Walter Cook, 

We have checked your reported query. We can customize the RadioButton by using Css style. 

Query 1: I get green backgrounds but the outer edge of the circle is still red for the selected radio.how to I change that? 

We can change the outer edge of the circle by using the below css. Please check the below code snippet. 

/* To customize the outer circle */ 

.e-radio:checked + label::before { 

  border-color: #689f38; 

} 

 

.e-radio:checked:focus + label::before, 

.e-radio:checked + label:hover::before { 

  /* csslint allow: adjoining-classes */ 

  border-color: #449d44; 

} 

 

Query 2: how do I change the color of the label itself (“Option 1” “This button’s label” etc) 

We can change the label of the RadioButton by using the below Css. Please check the below code snippet. 

/* To change the Label of Radio Button */ 

.e-radio + label .e-label { 

  color: #449d44; 

} 

 

For your reference, we have prepared a sample. Please check the below link. 

Sample: https://stackblitz.com/edit/angular-qxbmgx?file=app.component.css 

To know more about customization of RadioButton, please refer the below documentation link. 

Documentation : https://ej2.syncfusion.com/angular/documentation/radio-button/how-to/customize-radiobutton-appearance/ 

Please check the above links and get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[Walter Cook]

Good stuff!

thanks for the assist.

[Gayathri KarunaiAnandam]

Hi Walter Cook, 

 

Thanks for the update. 

 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Gayathri K