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 に答える