Input Field Placeholder not working.?

1 Views
<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 …

enter image description here

Post Views: 1

Related posts

Leave a Reply

6 comments

  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"/>

  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 .

  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"

  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