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

Question

I have some disabled input text fields that I want the text color to be black because it's too greyed out.

I know its a simple one-line code but it won't work for some reason. Other CSS properties work while it's disabled like the background color and stuff but not the text color.

Here's the CSS:

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

Here's the 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 is what it looks like on the android emulator running API 28.

I'm not sure why other properties work but not the text color. Any ideas?

P.S. this is a cordova project and i am building it in Jquery Mobile v1.4.5

Answer 1

Nice to reply to you about the issue you are facing.

Since, you are using Jquery Mobile. The Jquery mobile on DOM generates div covering the input box. Since, you are also using disabled property of input box. So, jquery mobile implements a class on that div and there the opacity level have been defined.

So, add this:-

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

Working Fiddle :- https://jsfiddle.net/h3Lbadgv/1/

Hope it works for you.

Thanks