Skip to content
Log in Sign up

How to hide text and number input fields placeholder when field is focused / active

Make the placeholder text fade away the moment a reader clicks into a text or number field in Vehica, with a few lines of CSS. Select fields keep their placeholder.

1 minute read

How to hide placeholders of text and number inputs (not select).

The Vehica search form with All / New / Used tabs above the All Makes, Min Price, Max Price, VIN and Min / Max fields, a highlighted text cursor over the Max Price field, and the orange Search button under Advanced Search.

Add this CSS code:

css 
div:not(.v-select) input[type=number]:focus::placeholder,
div:not(.v-select) input[type=text]:focus::placeholder {
  transition: opacity 0.2s ease;
}
div:not(.v-select) input[type=number]:focus::placeholder,
div:not(.v-select) input[type=text]:focus::placeholder {
  opacity: 0 !important;
}

You can add this CSS code this way: How to add CSS code that is future update compatible

Ask the people who build Vehica

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers 

We can also run your site for you, or build a new one.

Was this guide helpful?