Jquery Mobile 中的 CSS 禁用输入字段不更改文本颜色

Question

我有一些禁用的输入文本字段，我希望文本颜色为黑色，因为它太灰了。

我知道这是一个简单的单行代码，但由于某种原因它无法正常工作。其他 CSS 属性在禁用时有效，例如背景颜色和内容，但不是文本颜色。

这是CSS:

input[type="text"]:disabled {
  color: black;
}

这是HTML:

<div class="form-container">

                <label for="name">Full Name:</label>
                <input id="profileName" type="text" disabled="disabled">

                <label for="email">Email ID:</label>
                <input id="profileEmail" type="text" disabled="disabled">

                <label for="address">Address Line:</label>
                <input id="profileAddress" type="text" disabled="disabled">

                <label for="city">City:</label>
                <input id="profileCity" type="text" disabled="disabled">

                <label for="postcode">Postcode:</label>
                <input id="profilePostcode" type="text" disabled="disabled">

                <label for="state">State:</label>
                <input id="profileState" type="text" disabled="disabled">
</div>

This 是 android 模拟器上的样子运行 API 28.

我不确定为什么其他属性有效但文本颜色无效。有什么想法吗？

P.S。这是一个 cordova 项目，我正在 Jquery Mobile v1.4.5

中构建它

Answer 1

很高兴就您面临的问题回复您。

因为，您使用的是 Jquery 手机。 DOM 上的 Jquery 手机生成 div 覆盖输入框。因为，您还使用了 disabled 属性输入框。因此，jquery 移动设备在 div 上实现了 class，并且已经定义了 opacity 级别。

所以，添加这个：-

.form-container .ui-input-text.ui-state-disabled { opacity:1; color:black; }

工作Fiddle:-https://jsfiddle.net/h3Lbadgv/1/

希望对你有用。

谢谢

Answer 2

你能用这个吗

.form-container input:disabled{color: black}

<div class="form-container">

                <label for="name">Full Name:</label>
                <input value="XXXPPPAAPP" id="profileName" type="text" disabled="disabled">

                <label for="email">Email ID:</label>
                <input value="XXXPPPAAPP" id="profileEmail" type="text" disabled="disabled">

                <label for="address">Address Line:</label>
                <input value="XXXPPPAAPP" id="profileAddress" type="text" disabled="disabled">

                <label for="city">City:</label>
                <input value="XXXPPPAAPP" id="profileCity" type="text" disabled="disabled">

                <label for="postcode">Postcode:</label>
                <input id="profilePostcode" type="text" disabled="disabled">

                <label for="state">State:</label>
                <input id="profileState" type="text" disabled="disabled">
</div>

希望对您有所帮助。

Jquery Mobile 中的 CSS 禁用输入字段不更改文本颜色

Disabled input fields not changing text color with CSS in Jquery Mobile

css

disabled-input

jquery-mobile