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

Question

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

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

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

这就是本网站上的答案告诉我的内容。而且它完美地工作，所有文本输入字段现在都是 42 像素高和可爱的淡紫色。

不幸的是，所有文本输入变体都会覆盖 42px，这包括文本区域。因此，当我添加该 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 中，试图只允许调整某些字段的大小，而其他字段(如文本区域)保留其默认属性，但没有任何反应。所以我尝试了:

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

以防它可能附加默认类而不是附加它。仍然没有运气。 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>

我想，如果我不能使文本区域可调整大小，那么也许我至少可以将它设为 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;
}