1

所以这是我遇到的问题：

在此处输入图像描述

我想将选择的高度设置为我输入的高度。选择使用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 的一个完整的菜鸟，不知道如何简单地改变这个选择的高度..

4

1 回答 1

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 ，它将影响每个选择框。

于 2013-09-09T13:35:08.107 回答