0

In my search field I just figured it out that, when I click the input field it remains till the content entered. I want to hide the placeholder when the field is clicked.

Since this site is going to be delivered to another team I don't want to add JavaScript or jQuery code here. Because it was one of the requirement from the client. How can achieve it using CSS and HTML? This is a default behavior of HTML.

<input type="text" value="" placeholder="Keywords or Chassis/ Reference No">

halfer
  • 19,824
  • 17
  • 99
  • 186
Ramesh
  • 2,297
  • 2
  • 20
  • 42
  • Possible duplicate of [Placeholder doesn't disappear when input field in focus](https://stackoverflow.com/questions/22431297/placeholder-doesnt-disappear-when-input-field-in-focus) – IiroP Aug 07 '18 at 07:36
  • Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. – halfer Aug 07 '18 at 11:19

1 Answers1

4

You can use the selector input:focus::placeholder:

input:focus::placeholder {
  visibility: hidden
}
<input type="text" value="" placeholder="Keywords or Chassis/ Reference No">
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320