CODEWITHSUNDEEP
cssjquery-mobiledisabled-input
Shane D'Silva
Shane D'Silva

Reputation: 453

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

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

Upvotes: 0

Views: 1246

Answers (2)

SaurabhLP
SaurabhLP

Reputation: 3655

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

Upvotes: 1

Kevin
Kevin

Reputation: 1377

Can you use this one.

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

Hope It Helps.

Upvotes: 1

Related Questions