如何在jquery mobile中更改文本输入的大小而不是textarea

Question

这里有很多关于如何更改 jQuery 文本输入字段的各种属性的答案，但我发现它们都没有解决常规文本输入和 textarea 之间的区别（如果有的话）

我想出了如何使用类更改文本输入字段的 CSS 属性

.ui-input-text{
    height:42px !important;
    background: #AB63CC !important;
}

这就是这个网站上的答案告诉我的。它完美无瑕，所有文本输入字段现在都是 42 像素高和可爱的淡紫色。

不幸的是，所有文本输入变体都会覆盖 42px，这包括 textareas。因此，当我添加该 CSS 时，虽然所有文本输入字段都与菜单小部件完美对齐，但我的文本区域无法再调整大小，并且由于 !important 标记，我无法覆盖它。

即使自定义类也不起作用。所以如果我做，例如：

.textinput-foo .ui-input-text{
    height:42px !important;
}

在我的 CSS 中，然后

<label for="example" id="my-fancy-textinput" class="ui-hidden-accessible">LoremIpsum</label>
  <input name="example" id="example" value="" placeholder="LoremIpsum" type="text" class="textinput-foo">

在我的 HTML 中，为了只允许调整某些字段的大小，而其他字段（如 textareas）保留其默认属性，没有任何反应。所以我尝试了：

.ui-input-text .textinput-foo{
    height:42px !important;
}

以防它可能附加默认类而不是附加它。仍然没有运气。 textarea 的自定义类不能更好地工作。
Textarea CSS：

.ui-input-text .textarea-foo{
    height:100px !important;
}

文本区域 HTML：

<label for="example-2" id="my-fancy-textarea" class="ui-hidden-accessible">More</label>
<textarea cols="40" rows="8" name="example-2" id="example-2" placeholder="Type stuff plox" class="textarea-foo"></textarea>

我想如果我不能调整 textarea 的大小，那么也许我至少可以让它变成 4 行，这样就不需要调整大小了。唉，还是什么都没有。

是否有一个单独的文本输入类不适用于 textarea，反之亦然，因为我无法在任何地方找到，甚至在 official APIs 中也找不到

Answer 1

好的，由于使用了“ui-input-text”，听起来您正在使用特定的 jQuery Textinput 小部件 (http://api.jquerymobile.com/textinput/)。

要将这些样式仅应用于文本输入，而不是文本区域，请尝试：

div.ui-input-text { height: 42px !important }

这表示仅将此样式应用于也具有“ui-input-text”类的 div。

如果您要检查输入文本小部件生成的源代码，您会看到：

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
  <input type="tel" name="tel" id="tel" value="">
</div>

但是，当用于文本区域时会生成：

<textarea name="textarea" id="textarea-a" class="ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all ui-textinput-autogrow" style="height: 96px;">
</textarea>

或者，您可以只指定一个单独的 CSS 定义来覆盖文本区域的 .ui-input-text：

.ui-input-text {
    height:42px !important;
}

textarea.ui-input-text {
    height:100px !important;
}

Answer 2

作为替代方案，jQM 为称为 data-wrapper-class 的输入提供数据属性（api doc：http://api.jquerymobile.com/textinput/#option-wrapperClass）。这允许您将一个类直接应用到 jQM 在增强文本框时添加的最外层包装 DIV。

<label for="example" id="my-fancy-textinput" class="ui-hidden-accessible">LoremIpsum</label>
<input name="example" id="example" value="" placeholder="LoremIpsum" type="text" data-wrapper-class="inputWrapper">

.inputWrapper{
    height:82px;
}

这是一个DEMO