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!
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!
Share Improve this question edited Feb 26, 2013 at 12:57 sbaltes asked Feb 26, 2013 at 10:33 sbaltessbaltes 4791 gold badge9 silver badges17 bronze badges2 Answers
Reset to default 3You 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);
}
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.