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.

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>

Also, you might want to check out the blog post about font background color.

And since we’re talking about input fields, you may want to check out how to set up textarea default value as well as HTML currency input.

Until next time,
Will
Senior Developer Content Writer