CSS textarea active state, out of focus state

In web development, text areas are commonly used form elements for users to enter multiple lines of text. When designing web forms, beautifying the style of text areas can improve the user experience. In this article, I will detail how to use CSS styles to beautify the active and out-of-focus states of text areas.

Active State

The active state refers to the state when the user clicks on the text area and begins entering text. We can use CSS styles to modify the text area’s border, background color, and other properties to beautify the active state.

First, we create an HTML file containing a text area element:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Textarea Activated</title> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<textarea></textarea> 
</body> 
</html>

Next, create a CSS file in the same directory called styles.css”>

textarea {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
transition: border-color 0.3s;
}

textarea:focus {
border-color: #007bff;
}

In the above style code, we set some basic styles for the text area element, such as width, height, padding, and border. The :focus pseudo-class selector allows you to add styles to the active state of a text field. Here, we’ll change the text field’s border color to blue.

Save the modified CSS and HTML files. Open the HTML file in a browser and click the text field to see the active state.

Out-of-focus State

The out-of-focus state occurs when a user clicks a text field to enter text and then clicks elsewhere, causing the field to lose focus. We can use CSS to modify properties like the text field’s border and background color to enhance the out-of-focus state.

Continue using the HTML file above, modify the CSS style as follows:

textarea { 
width: 300px; 
height: 200px;
padding: 10px;
border: 1px solid #ccc;
transition: border-color 0.3s;
}

textarea:focus {
border-color: #007bff;
}

textarea:active {
border-color: #28a745;
}

In the above style code, we use the :active pseudo-class selector to style the text area’s out-of-focus state. Here, we change the text area’s border color to green. Save the modified CSS and HTML files, open the HTML file in a browser, click the text area and enter text, then click elsewhere to defocus the text area to see the out-of-focus state in action.

Through the above introduction, we can use CSS styles to beautify the text area’s active and out-of-focus states, improving the user experience.