如何在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

  

这是 DEMO

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