Как изменить высоту флажка в jquery mobile 1.4.0?

Question

У меня есть следующий флажок, и я хочу увеличить флажок, изменив его высоту, так как он слишком мал для мобильных устройств, я пробовал следующее, но он не работал в jQuery mobile 1.4.0, пожалуйста, любая помощь будет принята с благодарностью..

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;}

Answer 1

Вот ДЕМО

CSS устанавливает размер метки вокруг флажка до 128 пикселей; затем размер самого флажка равен 64 x 128, затем он центрируется в своем контейнере с помощью отрицательных полей и, наконец, размер самого значка проверки.

Вы можете играть со значениями, чтобы получить желаемый результат...

.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 */
}