禁用的输入字段不会在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模拟器上的样子。

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

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

中进行构建

Answer 1

您能使用这个吗？

.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>

希望有帮助。

Answer 2

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

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

所以，添加此：-

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

正在工作的小提琴：- https://jsfiddle.net/h3Lbadgv/1/

希望它对您有用。

谢谢