In this article, we will change the input border after filling the text on the input text field. The onchange event attribute works when the value of the element changes and select 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.
<element onchange = "script">
Example: In this example, we will change the border bottom style when the user type some text in the field.
- Before filling the text:
- After filling the text:
- Google Chrome
- Internet Explorer
- How to remove borders of a canvas-type text using Fabric.js ?
- How to remove controlling borders of a canvas circle using Fabric.js ?
- CSS | Borders
- Borders in bootstrap with examples
- Gradient borders
- How to validate if input date (end date) in input field must be after a given date (start date) using express-validator ?
- How to change the style of alert box using CSS ?
- How to change an input button image using CSS?
- How to change Input characters to Upper Case while typing using CSS/jQuery ?
- How to change the font-color of disabled input using CSS ?
- How to change the button color after clicking it using AngularJS ?
- How to get the value in an input text box using jQuery ?
- How to place two input box next to each other using Bootstrap 4 ?
- How to validate if input in input field exactly equals to some other value using express-validator ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.