How to hide placeholder text on focus?

How to hide placeholder text on focus

Hide placeholder text on focus is owners choice. Also I have seen that some developers and designers want to do this. Some are using JavaScript or jQuery functions to achieve this. But I think that is too much. It is really easy to do with CSS.

Lets see how. Just use below code. Change the code accordingly. This is a general code which applies to all input elements.

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Practical approach to hide placeholder text of search input field

Lets’ apply this to a specific field. I choose to apply this a <input type="search" name="search" placeholder="Search for..." />

You can use below code to hide placeholder text on focus.

input[type=search]:focus::-webkit-input-placeholder { color:transparent; }
input[type=search]:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input[type=search]:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input[type=search]:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

This code only applies to a search input. Other fields will not override with this style.

Hope you’ll enjoyed this code snippet to hide placeholder text on focus. That is all from this tutorial. Hope you enjoyed this tutorial. Happy learning ahead. Thanks for reading.

Recommended: Please follow our step by step guide how to create a WordPress Theme from scratch. You’ll be able to create your own theme at the end of these lessons.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *