The pseudo-class :disabled specifies styles for an inactive input. Inactive means an input that has the attribute set to disabled.


The :disabled pseudo-class is used to select any disabled elements. An element is disabled if it cannot be activated (for example, it cannot be selected, clicked, or typed) or receive focus.


/* Select the <input> field that has been disabled */

input:disabled {
  background: red;


Example Form (not disabled)
Example Form (disabled)
<form action="#">
<fieldset id="form-not-disabled">
    <legend>Example Form (not disabled)</legend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Surname" />

<fieldset id="form-disabled">
    <legend>Example Form (disabled)</legend>
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Surname" disabled />

input[type='text']:disabled {
  background: #f3f3f3;