I'm attempting to adjust the brightness of an existing radio button when it's turned off using CSS in jQuery mobile. Here is what I've tried in my HTML file -
<style>
.ui-grid-b .ui-block-b: flip-select.label{
text-indent: 60%;
}
#flip-select{
text-indent: 60%;
}
#radio-choice-h-2a:true{
filter:brightness(50%);
}
.ui-radio .ui-btn.ui-radio-off:after {
filter: brightness(50%);
}
</style>
This section shows the HTML code for the radio button in jQuery mobile 1.4.5 demos -
<div class="ui-grid-b">
<div class="ui-block-a"><!--row 1 block a-->
<!--radio button 1-->
<fieldset id="radio-choice-h-2" data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>NLED</legend>
<input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio">
<label style="background-color: #ff0000" for="radio-choice-h-2a">ON</label>
Even after adding the internal CSS style element, I'm not seeing any changes. Am I making a mistake? I have come across similar posts. However, my goal is to modify an existing radio button.
This customization is intended for touchscreens on a webpage.