web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Targeting a form eleme...
Power Pages
Answered

Targeting a form element with CSS

(0) ShareShare
ReportReport
Posted on by 289

Hi,

 

Over the last few days I have had great success styling my portal thanks to help received here but I cannot find a way to target the radio buttons on a basic form. I just want to change the color of the button when it has been selected. Please see image and I would really appreciate any help as I have poured over the css but i am having no luck!

 

Thanks in advance

radio.button-styling.jpg
Categories:
I have the same question (0)
  • ragavanrajan Profile Picture
    7,044 Most Valuable Professional on at

    Hi @matthu 

     

    Do you want to change the label color of the radio button when it is checked or the color inside the radiobutton? 

  • Matthu Profile Picture
    289 on at

    hi @ragavanrajan @I want to change the colour when it is checked - it currently shows up as blue but I need it to show as my company branding. Thanks for your previous help by the way the portal looks fab this is one of the last bits I haven’t yet styled so it will be nice to finish it off.

  • Verified answer
    ragavanrajan Profile Picture
    7,044 Most Valuable Professional on at

    Hi @matthu 

     

    As far as I am aware, changing the radio button's colour when it is checked is quite hard to achieve. Even if you switch to different colour themes like green the radio button checked color still will be blue. 

     

    We can only achieve different colours if the radio button is inside the page instead of the basic form. Targeting pseudo-elements of the radio buttons is not effective if it is inside the form. 

    I have spent some time on achieving this using the "filter" property but you need to spend time to understand more about filter property to achieve the exact color you need but for the proof of concept the below will work 

     

    In you custom css: try the following 

     

     

    input[type="radio"], input[type="checkbox"]:checked::after{
     filter: hue-rotate(220deg) !important;
    }

     

     

    Save> Sync configuration > and browse website. Hit ctrl + F5 to see a change in the colour to green. 

     

    Note: You can play around with the hue-rotate attribute to change the colour combination 

    Output sample:

     

    ragavanrajan_0-1628556815951.png

     

    Hope it helps. 
    ------------

    If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

  • Matthu Profile Picture
    289 on at

    Thank you @ragavanrajan for your efforts!

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Leaderboard > Power Pages

#1
Hammed Profile Picture

Hammed 22

#2
Lucas001 Profile Picture

Lucas001 21 Super User 2026 Season 1

#3
DP_Prabh Profile Picture

DP_Prabh 19

Last 30 days Overall leaderboard