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

Question

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

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

确实适用于文本区域，但不适用于文本输入字段：

提前致谢！

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>

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

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

Answer 2

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

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