Search code examples
htmlcssdisabled-input

CSS: How to change font color for a specific disabled field?

I found several topic about how to change all disabled fields's font-color by using the next code:

input[disabled=disabled] {
 /* your style */
 color: #fff !important;
}

But I have several disabled fields and I would like to change only the targeted field's color. So how can I add a targeting by ID to this script? Thank you for your help!

Solution

  • Switch the input selector for your ID:

    #thisOne[disabled=disabled] {
 color: #fff !important;
 background: red;
}
    <input id="thisOne" disabled="disabled" value="Lorem ipsum">

<input id="notThisOne" disabled="disabled" value="Lorem ipsum">

    A class would probably make more sense so that you can reuse the styles:

    .these[disabled=disabled] {
 color: #fff !important;
 background: red;
}
    <input class="these" disabled="disabled" value="Lorem ipsum">
<input class="these" disabled="disabled" value="Lorem ipsum">

<input class="notThese" disabled="disabled" value="Lorem ipsum">