CODEWITHSUNDEEP
jqueryhtmlcss
HellOfACode
HellOfACode

Reputation: 1743

Make disabled input stay same color like enabled

I have an input field with classes:

.list-default .value 
{
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    float: left;
    width: 55%;
    background-color: transparent;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 12px 0px 10px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.list-default .value:disabled
{
    opacity:1;
    font-size: 14px;
    font-weight: bold;
    color: #000000 !important;
    float: left;
    width: 55%;
    background-color: transparent;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 12px 0px 10px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

When I put disabled to true with jquery or with html the color becomes pale gray but if I put the color to for example red it is bright red.

How can I make the input text color be the same even if it's disabled?

Upvotes: 2

Views: 2152

Answers (2)

Nilesh Thakkar
Nilesh Thakkar

Reputation: 2895

I think you should set it as readonly rather disabled.

You can apply styles on it too.

HTML:

<form name="fish">
    <input type="text" name="big" value="Big Fish">
    <input type="text" name="little" value="Little Fish">
    <input type="text" name="tiny" value="Tiny Fish" readonly>
</form>

JavaScript:

document.forms['fish']['big'].readOnly = true;

CSS:

input[readonly] {
    color: #999;
}

Check out below fiddle:

http://jsfiddle.net/655Su/1/

Upvotes: 2

Tib
Tib

Reputation: 2631

It's input[disabled] not input:disabled

In yout case :

.list-default .value[disabled]

Upvotes: 1

Related Questions