Input Field Placeholder not working.?

Question

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url(home_url('/')); ?>">
  <input type="search" class="search rm-input" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder "Your name here"/>
  <input type="submit" style="display:none" id="searchsubmit" value="<?php echo esc_attr_x('Search', 'submit button'); ?>" />
</form>

I don't know why the placeholder text is not displaying in the field ...

Solution 1

You missed out '=' Should be:

placeholder="Your name here"

Solution 2

You forget = (equal) sign in your input fields.

<input type="search" class="search rm-input" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="Your name here"/>

Solution 3

Missing = in placeholder "Your name here"

Placeholder text will be shown only if the value attribute is empty.In your example it has value, so value will be shown there.

With value

 <input type="search" class="search rm-input" value="My name" name="s" id="s" placeholder="Your name here"/>

Without value

   <input type="search" class="search rm-input" value="" name="s" id="s" placeholder="Your name here"/>

Refer : JsFiddle

PS: If you are using wordpress create searchform.php in your theme folder and add the form there .

Solution 4

Placeholder doesn't work for Inputs that are not the types text so you will have to use value in your case like this value="What you want to be displayed"

Solution 5

It could be that the placeholder color is not inherited from the parent, so it might be black, and invisible on black bg.

You can change it like this:

input::-webkit-input-placeholder {
  color: #ffffff;
}

input:-moz-placeholder { 
  color: #ffffff;
}

input::-ms-input-placeholder  { 
  color: #ffffff;
}

I used input as the selector, you should probably add some better specificity to that, maybe give that input and ID like "searchBar" then use the selector input#searchBar

View more solutions