javascript - jQuery mobile：テキスト入力の背景色を設定する方法

Question

ポップアップパネルで使用するテキスト入力フィールドの背景を透明にしたい。使用する

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

テキストエリアでは機能しますが、テキスト入力フィールドでは機能しません。

前もって感謝します！

Answer 1

親要素の background-color を設定する必要があります.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) に設定すると、テキストエリアと入力テキストフィールドの親タグの背景が異なるため、異なる結果が得られます色。

この場合、パフォーマンスを向上させ、このような副作用を排除するために単色を使用してください。または、両方の親タグの背景色が同じであることを確認してください。