Change Placeholder Text jQuery and CSS styling

Glenn Glenn's Blog 0 Comments

A quick snippet to change the placeholder text of an input field:-


<script>
  jQuery(document).ready(function($){
  $('.searchform').find("input[type=text]").each(function(ev)
  {
      if(!$(this).val()) {
     $(this).attr("placeholder", "Search this site");
  }
  });
});
  </script>

You can also achieve placeholder custom style with CSS on supported browsers

[css]
/* Input Placeholder */
input::-webkit-input-placeholder {
text-transform: none;
color: red:
}
input::-moz-placeholder {
text-transform: none;
color: red:
}
input:-moz-placeholder { /* Older versions of Firefox */
text-transform: none;
color: red:
}
input:-ms-input-placeholder {
text-transform: none;
color: red:
}
[/css]

Pagelines Users

If you are using Pagelines DMS then you can also use the following hook in your themes functions.php file to customise the search and change the placeholder text:-



<?php
add_filter('pagelines_search_form','override_search_form');
function override_search_form() {
$searchfield = sprintf('<input type="text" value="" name="s" class="searchfield" placeholder="%s" />', 'Search this site...'); // modify here
$searchform = sprintf('<form method="get" class="searchform pl-searcher" onsubmit="this.submit();return false;" action="%s/" ><fieldset><span class="btn-search"><i class="icon icon-search"></i></span>%s</fieldset></form>', home_url(), $searchfield);
return $searchform;
}
?>

 

 

 

About the Author
Change Placeholder Text jQuery and CSS styling Change Placeholder Text jQuery and CSS styling 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *