How To Hide Placeholder Text on Focus With CSS

This article demonstrates how to hide the placeholder text in an HTML input during cursor focus. This can be created using only using CSS.

This article was first seen on and republished from csstutorial.io

Here is an example of an HTML input box whose placeholder text is hidden during focus.

Creating the HTML

First, you must create a basic HTML input with the placeholder attribute. The attribute can contain any text you like. Example below:

<input type="text" placeholder="Enter your name">

Creating the CSS

Secondly, you will want to create some CSS. The CSS will use the input:focus selector with a webkit-input-placeholder pseudo-class. This selector selects the placeholder text when the input box has focus with a cursor. When the selector is activated. The input placeholder has its opacity set to 0, effectively hiding it.

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

input:focus::-moz-placeholder {
   opacity: 0;
}
 
input:focus:-ms-input-placeholder {
    opacity: 0;
}
 
input:focus:-moz-placeholder {
   opacity: 0;
}

Edit the demo on codepen.io

Recommended Articles