禁用的输入字段不会在 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 是它在运行 API 28 的 android 模拟器上的样子。

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

附：这是一个 cordova 项目，我正在 Jquery Mobile v1.4.5

中构建它

Answer 1

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

因为，您使用的是 Jquery Mobile。 DOM 上的 Jquery mobile 生成覆盖输入框的div。因为，您还使用了输入框的disabled 属性。因此，jquery mobile 在该div 上实现了一个class，并且已经定义了opacity 级别。

所以，添加这个：-

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

工作小提琴：- 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>

希望对您有所帮助。