Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to clear an input field on focus with CSS?
Clearing an input field on focus means removing its current value when the user clicks or tabs into the field. This is commonly used for placeholder-style text or to provide a clean slate for user input.
Syntax
input:focus {
/* CSS cannot directly clear values - requires JavaScript */
}
Note: CSS alone cannot clear input values. This functionality requires JavaScript combined with CSS for styling.
Method 1: Using JavaScript with onfocus Attribute
The most straightforward approach is using the onfocus attribute to clear the input value when focused −
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 5px;
width: 300px;
}
input:focus {
border-color: #4CAF50;
outline: none;
}
</style>
</head>
<body>
<h3>Click the input field to clear it</h3>
<input type="text" onfocus="this.value=''" value="Click to clear this text">
</body>
</html>
An input field with placeholder text "Click to clear this text" appears. When clicked, the text disappears and the border changes to green.
Method 2: Multiple Input Fields with Styling
Here's a complete form example with multiple input fields that clear on focus −
<!DOCTYPE html>
<html>
<head>
<style>
.form-container {
display: flex;
flex-direction: column;
width: 400px;
margin: 20px auto;
padding: 30px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 10px;
background-color: #f9f9f9;
}
input {
margin: 10px 0;
padding: 12px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 5px;
transition: border-color 0.3s ease;
}
input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0,123,255,0.3);
}
button {
margin-top: 15px;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="form-container">
<h3>Registration Form</h3>
<input type="text" onfocus="this.value=''" value="Enter your username">
<input type="email" onfocus="this.value=''" value="someone@example.com">
<input type="password" onfocus="this.value=''" value="password123">
<button>Submit</button>
</div>
</body>
</html>
A styled registration form appears with three input fields (username, email, password) and a submit button. Each field clears its placeholder text when focused and shows a blue border with shadow effect.
Key Points
- CSS provides styling for focus states with the
:focuspseudo-class - JavaScript's
onfocus="this.value=''"handles the actual value clearing - Combine both for a complete user experience with visual feedback
- Use
transitionproperties for smooth focus effects
Conclusion
While CSS cannot directly clear input values, it enhances the user experience through focus styling. Combining JavaScript's onfocus attribute with CSS focus states creates an effective solution for clearing input fields with visual feedback.
Updated on: 2026-03-15T14:38:53+05:30
2K+ Views
Advertisements