Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How remove font color in disabled input

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.

like image 687
Peter Avatar asked Dec 04 '25 22:12

Peter


2 Answers

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.

like image 155
Ali Bassam Avatar answered Dec 06 '25 13:12

Ali Bassam


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

See DEMO.

div.red input[type=text]:not([disabled]),
div.red select:not([disabled]){
    color: red;
}
like image 23
Antony Avatar answered Dec 06 '25 13:12

Antony