How to clear an input field on focus with CSS?



Following is the code to clear an input field on focus −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<h1>Clearing an input field on focus example</h1>
<input type="text" onfocus="this.value=''" value="Some random text...">
<h2>Click on the above field to clear its value</h2>
</body>
</html>

Output

The above code will produce the following output −

On clicking the field, the inner value will be cleared −


Advertisements