Menu
Is there any way I can clear placeholder text on focus in Chrome, Firefox clears the text on focus but Chrome doesn't.
This confuses the user whether the text in the bar is typed, or it's a placeholder text (Even if I changed the text color to light grey), I don't want to use unnecessary JavaScript or jQuery for this, I want to know if there's some HTML/CSS solution for this
Demo Fiddle
Chrome Preview (On Focus)
Firefox Preview (On Focus)
277
The “placeholder” property is used to get or set the placeholder of an input text. This can be used to change the placeholder text to a new one. The element is first selected using a jQuery selector. The new placeholder text can then be assigned to the element's placeholder property.
Definition and Usage The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.
Try using
input:focus::-webkit-input-placeholder
{
color: transparent;
}
It will resolve the issue. The text is visible on focus because of the auto focus on page load.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
