We are using placeholder text in a single line text field, as shown in the screenshot. How can we make the placeholder text disappear when a user clicks in the field?
Hi John. If you want the placeholder text to disappear when the field has focus, you can use this CSS:
input:focus::-webkit-input-placeholder {
color : transparent;
}
input:focus::-moz-placeholder {
color : transparent;
}
input:-moz-placeholder {
color : transparent;
}
input:focus::-webkit-input-placeholder {
opacity : 0;
}
input:focus::-moz-placeholder {
opacity : 0;
}
input:-moz-placeholder {
opacity : 0;
}
You can add this CSS to your theme (or child theme) stylesheet or via the Appearance Customizer (Appearance > Customize > Additional CSS). If you have any other questions, please let us know.
1 Like
That did the trick, thank you!
1 Like