You are viewing limited content. For full access, please sign in.

Question

Question

Change the color of the label on radio buttons

Forms Version 10
Updated July 20, 2018
asked on July 20, 2018

Hello all,

Looking for a little CSS help.  I have seen in a couple other posts the CSS code snippet below.

 

input[type=checkbox]:checked + label {color: #0B4DB7};

 

This works great for change the color of the text when the check box is checked.  I would greatly appreciate it if anyone could point me into what changes to use on radio buttons.  I have tried changing it to type=radio and type=radiobutton but have had no luck.

 

I did see a posting on changing radio buttons with JavaScript.  I was wondering if it is doable with CSS instead of JavaScript.

Thanks.

 

0 0

Answer

SELECTED ANSWER
replied on July 20, 2018

Maybe it was just missing quotes around the type? I tested the following and it worked for me.

input[type="radio"]:checked + label {
  color: #0B4DB7;
}

 

1 0
View 2 previous replies
replied on July 20, 2018

Must be something messed up with my CSS.  I added the quotes and it still didn't work.  Also added a CSS class and it still doesn't work.

Thanks for the input.  I will have to dig and see if something is interfering with the CSS specific to radio buttons.

0 0
replied on July 20, 2018

It is possible that other CSS is overriding this styling. Try adding !important. If that fixes it than it would indicate you just need higher specificity to override some other style present on the page.

0 0
replied on July 20, 2018

The important tag was the first thing I tried.  Made no difference.  Still didn't work.

 

Thanks.

0 0
replied on July 20, 2018

What does it show when you inspect the page element in the browser? It should help you determine whether this CSS is being overridden or not applying at all.

0 0
replied on July 20, 2018

Another set of eyes found it!  Taking the ; off the end of the line fixed everything.

 

Thanks for the help.

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...