Change the background color of an Input Field using JS

# Table of Contents

# Change the background color of an Input field in JavaScript

To change the background color on an input field, set the input field's style.background property to a specific color.

The backgroundColor property changes the element's background color.

Here is the HTML for this example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <input type="text" id="first_name" />
    <button id="btn">Button</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  const input = document.getElementById('first_name');

  input.style.backgroundColor = 'green';

  // 👇️ optionally change the text color
  // input.style.color = 'white';
});

change background color of input

The code for this article is available on GitHub

We used the document.getElementById() method to select the button element by its id.

We added a click event listener to a button, so every time the button is clicked, the handler function is invoked.

When the button is clicked, we access the input element and change its background color using the style.backgroundColor property.

# Change the background color when an Input field is Empty

To change the background color of an input field when it is empty:

Add an input event listener to the input field.
Check if the input's value is empty.
If it is, set the style.backgroundColor property to a specific color.
Otherwise, set the style.backgroundColor property to an empty string.

Here is the HTML for this example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <input type="text" id="first_name" />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const input = document.getElementById('first_name');

input.addEventListener('input', event => {
  if (input.value === '') {
    input.style.backgroundColor = 'lime';
  } else {
    input.style.backgroundColor = '';
  }
});

change background color of input when empty

The code for this article is available on GitHub

We added an oninput event to the input field. The event gets triggered every time the value of the input field changes.

We check if the input's value is empty and if it is we update the element's background color.

If the value is not empty, we reset the backgroundColor property.

You might see examples that use the onchange event instead of oninput.

The difference between the two is that oninput gets triggered immediately after the value has changed, whereas onchange occurs when the element loses focus.

I've also written an article on how to change the background color on click.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Change the background color of an Input Field using JS

# Table of Contents

# Change the background color of an Input field in JavaScript

# Change the background color when an Input field is Empty

# Additional Resources

Borislav Hadzhiev