0

我有以下复选框，我想通过改变它的高度来扩大复选框，因为它在移动设备中太小了，我尝试了以下但它在 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;}

在此处输入图像描述

4

1 回答 1

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 */
}
于 2014-01-12T20:35:39.007 回答