CSS-Tricks Almanac – :disabled

CSS-Tricks Almanac – :disabled.markdown

CSS-Tricks Almanac – :disabled

Demonstrating the use of the :disabled pseudo-class on input elements. Also, cornflower blue!

Forked from Zachary Kain's Pen CSS-Tricks Almanac – :disabled.

A Pen by Tali Walt on CodePen.

License.

index.html

<form action="#">
    <label for="name">Enabled Input:</label>
    <input type="text" autofocus>
      <hr>
    <label for="name">Disabled Input:</label>
    <input type="text" disabled>
</form>  

style.css

/* The good stuff starts here :)
*/

  input {
    width: 60%;
    margin: 0;
    border: none;
    outline: 1px solid lightgrey;
    outline-offset: 2px;
  }

input:disabled {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;
}

/* BASIC PAGE CSS. NOT PART OF THE EXAMPLE
*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font: 300 16px/1.25 "Helvetica Neue", sans-serif;
  color: #708090;
  background: cornflowerblue;
  padding: 1.5em;
}

form {
  background: whitesmoke;
  padding: 1.5em;
  max-width: 400px;
  width: 100%;
  outline: 3px solid rgba(0, 0, 0, 0.25);
}

  hr {
    visibility: hidden;
  }

  label {
    margin-right: 3%;
  text-align: left;
    display: inline-block;
    width: 35%;
  }