I'm customizing Wordpress's Twenty Eleven 'SearchForm' / 'searchform.php' --
I want to keep the Enter-to-Search functionality; but I want to add my custom Image button for users to also have the traditional click-button-submit.
HOWEVER; when I drag the Ids, classes, and name used on the functional default to the new Image button - my image does not display. But, when I don't have those classes, etc used.. It renders?
Below is where I'm currently at with the code. (Any suggestions?)
<?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" name="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" value="Search, title, author, keyword" onfocus="ClearForm();" style="width: 225px;">
<input type="submit" src="http://#/wp-content/uploads/2012/03/searchnav_btn.gif" style="position:absolute;" value="<?php esc_attr_e( 'Search' ); ?>" class="submit" name="submit" id="searchsubmit"/>
<input type="image" src="#/wp-content/uploads/2012/03/searchnav_btn.gif" style="position:absolute;" value="<?php esc_attr_e( 'Search' ); ?>" class="submit" name="submit" id="searchsubmit"/>
</form>
<script language="javascript">
<!--
function ClearForm() {
document.searchform.submit.value= "";
}
//-->
</script>
You can try adding a z-index to the image styling to see if it will appear on top.