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;

}