Radio Button Styling

1
Hi, I'm trying to change the color of Radio Button while clicking the "yes" and "no".But the CSS style is not getting applied to Label of Radio Buttons.Can anyone please suggest better way to achieve it. Used the below CSS styling: input[type='radio']:after {         width: 15px;         height: 15px;         border-radius: 15px;         top: -2px;         left: -1px;         position: relative;         background-color: #d1d3d1;         content: '';         display: inline-block;         visibility: visible;         border: 2px solid white;     }     input[type='radio']:checked + label:after {         width: 15px;         height: 15px;         border-radius: 15px;         top: -2px;         left: -1px;         position: relative;         background-color: #ffa500;         content: '';         display: inline-block;         visibility: visible;         border: 2px solid white;     }          label:focus-within{         color:red;     }    
asked
3 answers
0

Hello Menagapriya,

Have you tried changing background-color: #ffa500; within  input[type='radio']:checked + label:after ? 

Also make sure you compile your Sass to the right CSS folder (If you use SASS) and rebuild your project following every CSS change.

answered
0

Hi Menagpriya,

 

In the past, I've customized the radio button list widget to make style changes. If you use 7zip you can open the archive and edit the style sheet for the widget. 

The style sheet is located in the ui folder. Here is the path:

\RadioButtonList.mpk\RadioButtonList\widget\ui\

 

also here is the link to the widget

https://appstore.home.mendix.com/link/app/20/Mendix/Radiobutton-List

 

Also just a warning, when you customize a widget from the app store the changes can be overwritten by updating the widget. So make sure you keep copies of all documents that you customize in case your changes are accidentally overwritten or if you want to update the widget later. 

Hope this helps!

 

answered
0

Hi Menagapriya,

Because Mendix places the Input object within the Label object, it's not possible to change the Label text color with only CSS. Because there is no parent CSS selector in CSS3 you have to use either a widget like Austin mentions or use JavaScript to find the selected radio button and append an extra CSS class to the parent label object. 

But to use JS you also need to use a widget: https://appstore.home.mendix.com/link/app/56/. When choosing this way you could add this to a default page layout to use the code on all the pages where you have this page layout.

 

Let me know if this works for you, or if you need help.

Cheers,

Jeffrey

answered