How to change checkbox height in jquery mobile 1.4.0?

Question

I have the following checkbox , and I want to enlarge the checkbox by changing its height since its too small in mobile devices , I have tried the following but it didn't work in jQuery mobile 1.4.0 , please any help would be greatly appreciated ..

Html

<div class="ui-grid-a ui-field-contain" >

 <div class="ui-block-a"   style="width:80% !important;padding-right:29px !important;">

 <font id="MobileNum_Label"  size="5px" color="#002a4a" style="text-  align:right;float:right;font-weight:normal;white-space: normal;" > Check To Enable Daily   Messages </font>

 </div>

 <div class="ui-block-b"  style="text-align:right;float:right;right: 0;margin-right: 0  !important;width:20% !important;">

 <fieldset   data-role="controlgroup" class="customCheckBox" data-iconpos="right"  style="padding-top:7px;"  >

  <input type="checkbox" name="CheckB" id="CheckB"   data-iconpos="notext" />
  <label for="CheckB"  data-inline="true"></label>

  </fieldset>
  </div>

  </div>

CSS :

.customCheckBox{
  text-align:right;
  float:right;
  width:68px;
 }
input[type="checkbox"] {
  display: none;
 }

.ui-checkbox input{height:180px;}

enter image description here

try: .ui-controlgroup-controls .ui-btn-icon-notext{height:180px;} — ezanker, Jan 12 '14 at 14:38
@ezankerThanks a lot its working but it increases the label height which is around the check box can we enlarge the checkbox itself ?"the blue square which appear in the image i have uploaded" — user, Jan 12 '14 at 15:26

score 1 · Accepted Answer · answered Jan 12 '14 at 20:35

Here is a DEMO

The CSS sizes the label around the checkbox to 128 px; then the checkbox itself is sized to 64 x 128 then it is centered within its container via negative margins finally the check icon itself is sized.

You can play with the values to get the desired output...

.ui-controlgroup-controls .ui-btn-icon-notext{
    height:128px;
} 
.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after, .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
    width: 64px;
    height: 128px;
}
.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after, .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
    margin-top: -64px;
    margin-left: -32px;
}
.ui-icon-check:after, html .ui-btn.ui-checkbox-on.ui-checkbox-on:after{
    background-size:42px 42px; /* size of check icon */
}

@ezankerThank you very very much , I really appreciate that you are helping me — user, Jan 12 '14 at 21:36

How to change checkbox height in jquery mobile 1.4.0?

1 Answers1