How remove font color in disabled input

Question

http://jsfiddle.net/NUDDv/

HTML:

<div class="red">
    <input type="text" value="text" disabled="disabled">
    <select disabled>
        <option>aaa</option>
        <option>aaa</option>
    </select>
</div>
<div>
    <input type="text" value="text" disabled="disabled">
    <select disabled>
        <option>aaa</option>
        <option>aaa</option>
    </select>
</div>

CSS:

div.red input[type=text],
div.red select{
    color: red;
}
div.red input[type=text][disabled],
div.red select[disabled]{
    color: none;
}

What I can write to css disabled input for remove red color? I cant' set color, because disabled input don't look good. I would like set this in only CSS.

Answer 1

Keep things simple. Use the :not() pseudo-class.

See DEMO.

div.red input[type=text]:not([disabled]),
div.red select:not([disabled]){
    color: red;
}

Answer 2

There's nothing called color:none;

div.red input[type=text][disabled],
div.red select[disabled]{
    color: black;
}

To bring back the default color use:

color:GrayText;

CSS System Color Keywords - link

CSS system color keywords are a way of using CSS to style your documents so that they integrate into the environment that your customers are using. Rather than specifying a color exactly, you tell the user-agent to use the colors defined on the system.

Answer 3

color: none is not a valid color. Use a hex, rgb or any css valid color. If you want the text to be invisible, use color: transparent;.

In order to let the color fall back to it's original color for an element or a state like disabled, you can use color: initial;. See here.

Answer 4

I do not believe it is possible, cross-browser, to only use CSS to reset the text color to its initial state once it has been specified in CSS. You would have to remove the red class when disabling the inputs.

Otherwise, you can force a specific color and background-color in the disabled state for some level of parity across browsers.

input[type=text][disabled],
select[disabled] {
    color: #545454 !important;
    background-color: #EBEBE4 !important;
}

Note, however, that there are a variety of other default styles related to form elements. You cannot expect things to look exactly the same everywhere.

jsfiddle

Answer 5

In your jsfiddle third javascript line:

$('input[type=text], select').attr('disabled', 'disabled').css('color', 'grey');