使用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，它将影响每个单独的选择框。