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 the file /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

Add the following cascade style sheet (css) to your theme .css file, deleting other #searchform styles, if necessary.

#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;
}

Tags: Free and open source software, Information design, Interface design