2014-01-12 52 views
0

我有下面的複選框,我想通過改變它的高度來擴大複選框,因爲它在移動設備中太小了,我試過了以下,但它在jQuery mobile 1.4.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;} 

enter image description here

+0

嘗試:的.ui-controlgroup-控制的.ui-BTN-圖標NOTEXT {高度:180像素;} – ezanker

+0

@ezankerThanks一很多它的工作,但它增加了複選框周圍的標籤高度,我們可以放大複選框本身?「我已經上傳的圖像中出現的藍色方塊」 – user

+0

看到我的回答如下... – ezanker

回答

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

@ezankerThank你非常非常,我真的很感謝你幫助我 – user