Changing the color of the text box on a web page can be achieved using JavaScript and CSS. this can be done dynamically based on user interactions, such as when the user enters valid or invalid input.
How to change the text box color on a web page
here are the steps:
- Determine which text box you want to change the color of on your web page.
- Create a HTML file with an input field(text box) and some buttons to demonstrate the color change.
- Create a JavaScript file that contains functions to change the color of the text box based on specific conditions.
- Create a text box with id, colorBox. and three buttons to set the text box to valid, invalid, or reset to its color.
- Add styles for the ‘valid’ and ‘invalid’ classes to change the border color and text color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Change Text Box Color</title>
<style>
#myTextBox
{
padding: 10px;
border: 2px solid red;
border-radius: 5px;
font-size: 16px;
background-color: blue;
}
#myTextBox:focus
{
border-color: red;
}
</style>
</head>
<body>
<input type="text" id="myTextBox" placeholder="Enter text...">
</body>
</html>
OUTPUT:
