How to change Input box borders after filling the box using JavaScript ? Last Updated : 24 Jan, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will change the input border after filling in the text on the input text field. The onchange event attribute works when the value of the element changes and selects the new value from the list. Approach: Whenever the input value is changed with some value by the user, the onchange event attribute is triggered. After the event is fired, the value is checked if it is not null. If the user value exists, then the bottom border of the input control is changed to dotted red color by using inline styling. Syntax: <element onchange = "script"> Example: In this example, we will change the border-bottom style when the user types some text in the field. HTML <body style="text-align: center;"> <h2>GeeksForGeeks</h2> <h2> Change input borders after filling data </h2> <form> <label> NAME</label> <input type="text" id="fname" name="fname" value=""> <input type="submit" value="submit"> </form> <script> var gfg = document.getElementById("fname"); gfg.onchange = function (e) { if (gfg.value != '') { e.target.style.borderBottom = "4px dotted red"; } }; </script> </body> Output: How to change Input box borders after filling the box using JavaScript ? Supported Browsers: Google ChromeInternet ExplorerFirefoxOperaSafari HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples. JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples. Comment More infoAdvertise with us Next Article Change the Border of HTML Element in JavaScript M manaschhabra2 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Change Border Width of Div in JavaScript ? Div elements are essential in creating modern web applications, and manipulating their properties dynamically can enhance user experience. In this article, we'll see how to change the border width of a div element using JavaScript. The border-width property in CSS is used to specify the width of the 2 min read How to Adjust the Width of Input Field Automatically using JavaScript? The <input> element in HTML is used to create interactive controls for forms, allowing users to input data. It is one of the most versatile elements, with various input types and attributes that make it powerful for building forms. One important attribute is the width attribute, which allows y 2 min read How to trigger HTML button after hitting enter button in textbox using JavaScript ? In this article, we are given an HTML document containing a text area and the task is to trigger the button when the user hit Enter button. We can do it by using the "keyup", "keydown", or "keypress" event listener on the textbox depending on the need. When this event is triggered, we check if the k 4 min read Change the Border of HTML Element in JavaScript In this article, we will see how to change the Border of HTML element using JavaSCript. To change the border of an element, first, we select the element, and then use HTML DOM border style property to change the border. The CSS border properties are given below: border-style: The border-style In Jav 3 min read How to apply bottom border with only Input text field using CSS ? Adding a bottom border to the input field visually distinguishes it from surrounding elements on the page. Making input fields stand out on a website in a form for example is crucial. Styling these inputs with clear borders, appealing colors, and effects, can easily capture the user’s attention.Tabl 3 min read How to set the color of an element border with JavaScript ? In this article, we will see how to set the color of an element's border with JavaScript. To set the color of an element's border with JavaScript, we can use the element's style property. Method 1: First, we will create a text element and then apply some CSS styles including the border color of the 2 min read Like