Apple like accesible search field
Add to your website an Apple like search field, with rounded borders, shadows, the lens and the reset button. This solution, specific for Wordpress, is based on xhtml strict + css accessible codes, compatible with Mozilla Firefox, Apple Safari, Internet Explorer 7 and 6. You can customize graphics editing the images and localize the widget in infinite languages, thanks to php-gettext support. With few changes to the code you can use it in your non-Wordpress-based website.
The xhtml strict code
In Wordpress, edit both the files wp-content/themes/[your theme]/searchform.php and /wp-includes/widgets.php, commenting the following code.
__() and _e() are for localization with gettext.
<!--
<form id=”searchform” method=”get” action=”<?php bloginfo(’home’); ?>”>
<div>
<input type=”text” name=”s” id=”s” size=”15″ /><br />
<input type=”submit” value=”<?php echo attribute_escape(__(’Search’)); ?>” />
</div>
</form>
–>
…and insert the following code:
<?php
function wp_widget_search($args) {
extract($args); echo $before_widget;
?>
<form id=”searchform” method=”get” action=”<?php bloginfo(’home’); ?>”>
<p>
<label for=”s”><span><?php _e('Search'); ?></span></label>
<input name=”s” id=”s” type=”text” accesskey=”s” />
<input type=”reset” value=”<?php _e(’Reset’); ?>” accesskey=”r” />
<input type=”submit” value=”<?php echo attribute_escape(__(’Search’)); ?>” />
</p>
</form>
<?php
echo $after_widget;
}
?>
The css code
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
}
#searchform label {
float: left;
width: 20px;
height: 19px;
background: url(media/images/search_label.gif) no-repeat;
}
#searchform label span {
visibility: hidden;
}
#searchform input[type="text"] {
float: left;
width: 120px;
height: 13px;
font-size: .9em;
border-right: none;
border-left: none;
background-color: white;
}
#searchform input[type="text"]:focus {
border-color: silver;
}
#searchform input[type="reset"] {
float: left;
border: none;
width: 19px;
height: 19px;
background: url(media/images/search_reset.gif) no-repeat;
padding-left: 20px;
margin-right: -6px;
overflow: hidden;
color: transparent;
}
#searchform input[type=reset]:active {
background: url(media/images/search_reset_hover.gif) no-repeat;
}
#searchform input[type=submit]{
display: none;
}
Leave a Reply