INPUT Background Color

INPUT Background Color

TL;DR Summary – INPUT Background Color

Setting input background color is easy and can be done with this piece of CSS code:

input {
  background-color: orangered;
}

But what you also might want to set is the color of input field when it’s selected and someone is typing into it. And obviously you’d want to distinguish these two states: selected and non-selected (just like on the image on the top)

In that case you need this CSS code:

input:focus {
  background-color: orange;
}

And that is all you need to know about setting input background color.

And if you want to really speed up your programming career:

raise salary by 30%

More Details

Here is the full code used to generate the web page from the image on top:

<style>
  body { 
    background-color: gray; 
    padding: 300px;
    text-align: center;
  }
  input {
    font-size: 80px;
    margin-bottom: 50px;
    background-color: orangered;
  }
  input:focus {
    background: orange;
  }
</style>

<form action="#something">
  <input />
  <input />
  <input />
</form>

Until next time,
Will
Senior Software Developer