CODEWITHSUNDEEP
htmljquery-mobilecheckbox
Ortensia C.
Ortensia C.

Reputation: 4716

Remove contour checkbox in jquery Mobile

I got this, but I do not want the yellow outline. How can I do?

enter image description here

enter image description here

My code:

 <div class="ui-block-a">
              <div class="ui-bar ui-bar-e" style="height:50px">
                    <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                     <label for="checkbox-1"></label>
               </div>

Upvotes: 2

Views: 168

Answers (1)

Omar
Omar

Reputation: 31732

You need to override checkbox style in three steps.

Position of checkbox itself, which lays behind the visual checkbox. I have added div.-ui-bar before each overridden style in order not to specific and to keep original styles elsewhere.

Demo

div.ui-bar input {
 left: 10px !important
}

Width of label

div.ui-bar label {
 width: 27px !important
}

Position of visual checkbox

div.ui-bar .ui-checkbox .ui-btn-icon-left .ui-icon {
 left: 5px !important
}

Upvotes: 3

Related Questions