Question

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

我想出了如何使用类

更改文本输入字段的CSS属性

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

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

不幸的是，所有文本输入变体都有42px覆盖，这包括textareas。因此，当我添加CSS时，虽然所有文本输入字段与菜单小部件完美对齐，但我的textareas无法再调整大小，而且由于!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;
}

Textarea 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

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

2 个答案: