The customized search form in this version is inspired by the default twenty eleven Wordpress one.
While the default text appears almost everywhere, it may not be displayed properly in older versions of Firefox and Internet Explorer. This could be due to the CSS3 calls used in the twenty eleven theme by default. What would be the traditional code that works universally for setting default text in a form field?
(I'd like to avoid using PHP, jQuery, JS), but I am open to a reliable solution regardless of the method used.
Below is the code snippet for the search form:
<?php
/**
* The template for displaying search forms in Twenty Eleven
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
?>
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search, title, author, keyword', 'twentyeleven', 'twentyeleven' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search' ); ?>" />
</form>
<div id="searchtbtn"><img src="http://mysite.com/wp-content/uploads/2012/03/searchnav_btn.gif" style="margin-left: 292px; margin-top: 60px; max-height: 35px; max-width: 70px; position: absolute;"></div>