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

Question

I want the background of a text input field which I use in a popup panel to be transparent. Using

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

does work for a textarea, but not for the text input field:

Thanks in advance!

Answer 1

You should set background-color of the parent element .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>

Since div.ui-input-text is auto generated by jQuery Mobile, you should add this rule to your stylesheet:

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

Answer 2

in your example setting the background color of the input element works correctly but as your setting it to half transparent rgba(38,38,38,0.5) you're getting different results as the parent tags of your textarea and input textfield have different background colors.

Use solid colors in this case to get better performance and to exclude side-effects like this. Or just make sure both parent tags have the same background color.