jQuery mobile：如何设置文本输入的背景颜色

Question

我希望在弹出式面板中使用的文本输入字段的背景是透明的。 使用

 style="background: rgba(38,38,38,0.5);"

适用于textarea，但不适用于文本输入字段：

提前致谢！

Answer 1

您应该设置父元素.ui-input-text的背景颜色：

<div style="background: rgba(38,38,38,0.5);" class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-a ui-mini">
    <input data-mini="true" id="selectedNode" type="text" readonly="true" value="1234" class="ui-input-text ui-body-a">
</div>

由于jQuery Mobile会自动生成div.ui-input-text，因此您应该将此规则添加到样式表中：

.ui-input-text {
    background-color: rgba(38, 38, 38, 0.5);
}

Answer 2

在您的示例设置中，输入元素的背景颜色正常工作 但是当你将它设置为半透明的rgba（38,38,38,0.5）时，你会得到不同的结果，因为你的textarea和输入文本字段的父标签有不同的背景颜色。

在这种情况下使用纯色可以获得更好的性能并排除这样的副作用。或者只是确保两个父标签具有相同的背景颜色。