Change Placeholder Text jQuery and CSS styling

Glenn Glenn's Blog Leave a Comment

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

/* 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:
}

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 Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / 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.