-1

I am trying to lower the brightness(when off) of an existing radio button from jQuery mobile using CSS. I have tried the following 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 is the html part for the radio from 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>

I see no changes after I put the CSS internal style element in. Am I doing something wrong? I have noticed similar posts. But I want to make changes to an existing radio button

This is for running a webpage on touchscreens.

S_whynot
  • 1
  • 4
  • your code its working for me... – Ravi Kadyan Jun 28 '19 at 09:34
  • `#radio-choice-h-2a:true` - what is `:true` supposed to be? Not part of the pseudo classes I know. Is this something provided/implemented by jQuery Mobile, or …? – 04FS Jun 28 '19 at 10:01
  • I was trying to access the brightness of the id radio-choice-h-2a, it is just one of the things I tried, I assumed true meant ON state. Not jQuery Mobile it is CSS. – S_whynot Jun 28 '19 at 10:03

1 Answers1

0

Try this code: If you want to decrease the brightness or change the color of the radio button the you can easily change the background color.

.ui-grid-b{
  margin: 10px;
}

fieldset {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 40px;
}
fieldset input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

label:after {
  content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 4px;
    height: 15px;
    width: 15px;
    border: 1px solid #383838;
    border-radius: 50%;
}

label:before {
    content: "";
    position: absolute;
    display: none;
}
fieldset input:checked + label:before {
    display: block;
}
fieldset label:before {
  top: 56%;
    left: 7px;
    width: 11px;
    display: none;
    height: 11px;
    border-radius: 50%;
    background: #d61722;
}
<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> 
      </fieldset>
      </div>
      </div>
Mak0619
  • 652
  • 6
  • 20
  • Thanks for your suggestion, the only thing that makes a difference is #radio-choice-h-2{ filter: brightness(200%); } – S_whynot Jun 28 '19 at 15:00