Article Categories

Selected Reading

How to change Input box borders after filling the box using JavaScript?

Javascript Web Development Front End Technology

The style.border property is used to change an element's border styling in JavaScript. It allows you to modify the border-color, border-style, and border-width properties dynamically. This is particularly useful for providing visual feedback when users interact with form elements.

We use the onchange event to trigger border changes after filling input boxes. The onchange event occurs when the value of an HTML element changes and the element loses focus. This differs from oninput, which fires immediately as the user types.

The onchange event works with various form elements including text inputs, radio buttons, checkboxes, and select dropdowns. It's ideal for form validation and visual feedback scenarios.

Syntax

The following syntax shows how to use the style.border property to change input box borders:

element.style.border = "width style color"
element.style.borderBottom = "width style color"

Parameters

width - Sets border width using values like 'thick', 'thin', 'medium', or specific measurements (e.g., '10px')
style - Defines border style such as 'solid', 'dotted', 'dashed', 'double', etc.
color - Specifies border color using color names, hex codes, or RGB values

Basic Example: Changing Full Border

This example changes the complete border of input boxes when users fill them:

<!DOCTYPE html>
<html>
<body style="text-align: center;">
   <h2>Changing Input Box Borders After Filling</h2>
   
   <form>
      <label>First Name: </label>
      <input type="text" id="firstname" placeholder="Enter first name"><br><br>
      
      <label>Last Name: </label>
      <input type="text" id="lastname" placeholder="Enter last name"><br><br>
      
      <input type="button" value="Submit">
   </form>

   <script>
      const firstNameInput = document.getElementById("firstname");
      const lastNameInput = document.getElementById("lastname");
      
      firstNameInput.onchange = function(event) {
         if (event.target.value.trim() !== '') {
            event.target.style.border = "3px solid green";
         } else {
            event.target.style.border = "1px solid #ccc";
         }
      };
      
      lastNameInput.onchange = function(event) {
         if (event.target.value.trim() !== '') {
            event.target.style.border = "3px dotted blue";
         } else {
            event.target.style.border = "1px solid #ccc";
         }
      };
   </script>
</body>
</html>

Example: Changing Only Bottom Border

This example demonstrates how to change only the bottom border using borderBottom property:

<!DOCTYPE html>
<html>
<body style="text-align: center;">
   <h2>Changing Bottom Border of Input Boxes</h2>
   
   <form>
      <label>Email: </label>
      <input type="email" id="email" placeholder="Enter your email"><br><br>
      
      <label>Phone: </label>
      <input type="tel" id="phone" placeholder="Enter phone number"><br><br>
   </form>

   <script>
      const emailInput = document.getElementById("email");
      const phoneInput = document.getElementById("phone");
      
      emailInput.onchange = function(event) {
         if (event.target.value.trim() !== '') {
            event.target.style.borderBottom = "thick solid #00ff00";
         } else {
            event.target.style.borderBottom = "1px solid #ccc";
         }
      };
      
      phoneInput.onchange = function(event) {
         if (event.target.value.trim() !== '') {
            event.target.style.borderBottom = "4px dashed purple";
         } else {
            event.target.style.borderBottom = "1px solid #ccc";
         }
      };
   </script>
</body>
</html>

Implementation Steps

Create HTML form with input elements and unique IDs
Get element references using getElementById()
Attach onchange event handlers to input elements
Check input value inside the event handler function
Apply border styles conditionally based on input content

Key Points

Use trim() to remove whitespace when checking for empty values
Reset border styles when input becomes empty
onchange fires only when the input loses focus, not while typing
Consider using oninput for real-time validation feedback

Browser Compatibility

The style.border property and onchange event are supported in all modern browsers including Chrome, Firefox, Safari, and Edge.

Conclusion

Changing input box borders dynamically provides excellent user feedback for form interactions. Use style.border with onchange events to create responsive, visually appealing forms that guide users through the input process.

Gungi Mahesh

Updated on: 2026-03-15T23:19:01+05:30

2K+ Views

Previous Next