Last Updated: June 11, 2021
·
14.16K
· moak

Hide placeholder text on focus

For webkit and Firefox

::-webkit-input-placeholder{
    color: #ccc;
    font-style:italic;
} 
:focus::-webkit-input-placeholder{
     text-indent: -999px
}
::-moz-placeholder{
    color: #ccc;
    font-style:italic;
}
:focus::-moz-placeholder{
     text-indent: -999px
}

5 Responses
Add your response

Just used this! Thanks for the tip

over 1 year ago ·

Cool tip. :)

over 1 year ago ·

For -moz- there should be two :: like in webkit. Second You could add -ms-input

over 1 year ago ·

Not working anymore in Firefox. But I just replaced text-indent with color: transparent; and it worked.

over 1 year ago ·

nice!

over 1 year ago ·