使用jQuery更改jQuery Mobile“選擇”的高度？

Question

所以這是我遇到的一個問題：

我想將選擇的高度設置為輸入的高度。 選擇使用具有填充的ui-btn-inner類，並且當更改時，選擇的高度也會更改。

這是ui-btn-inner創建的填充：

這是我的代碼：

    <div class="ui-grid-a">
        <div class="ui-block-a" style="width: 80%;">
            <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
            </div>

            <input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>

        </div>
        <div class="ui-block-b" style="width: 20%; padding-left: 15px;">
            <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
            </div>

            <select name="select-choice-1" id="select-choice-1" data-theme="a" style="height: 40%; padding: 0; margin: 0;">
                    <option value="" style="padding: 0;">CAD</option>
                    <option value="" style="padding: 0;"></option>
            </select>

        </div>
    </div>

請注意，無論我在哪里放置style="padding: 0;" 它仍然不影響填充嗎？ jQuery Mobile生成代碼，但是我無法將類附加到該代碼。

我是jQuery的一個完全菜鳥，不知道如何簡單地更改此選擇的高度。

Answer 1

您缺少明顯之處。

您原來的選擇不再可見。 您還可以看到，新的只是<div>和<span>的自定義組合。 新的自定義選擇框將不會繼承舊的CSS。 為了使其工作，需要更改新的選擇框CSS結構。

工作示例： http : //jsfiddle.net/Gajotres/PMrDn/107/

HTML：

<div class="ui-grid-a">
    <div class="ui-block-a" style="width: 80%;">
        <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
        </div>

        <input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>

    </div>
    <div class="ui-block-b" style="width: 20%; padding-left: 15px;"  id="grid-container">
        <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
        </div>

        <select name="select-choice-1" id="select-choice-1" data-theme="a">
            <option value="" style="padding: 0;">CAD</option>
            <option value="" style="padding: 0;"></option>
        </select>

    </div>
</div>

CSS：

#grid-container .ui-select div span {
    padding-bottom: 0.14em  !important;
}

或者，如果您想使選擇框文本完美居中，請看以下示例： http : //jsfiddle.net/Gajotres/PMrDn/108/

CSS：

#grid-container .ui-select div span {
    padding-top: 0.2em  !important;
    padding-bottom: 0.2em  !important;
}

grid-container只是提供給網格容器的ID，因此我們只能影響此選擇框。 如果我們更改.ui-select，它將影響每個單獨的選擇框。