I just finished doing this for a site I’m working on, and figured I’d share. I have the blue focus ring and everything working in one shot. This uses Prototype.js 1.6 or better and CSS.
First, the JavaScript. The following code can be in the head or a separate file, as long as Prototype is already loaded.
var DEF_VAL = 'Search...';
$$('input.search').each(function(elm){
if(Prototype.Browser.WebKit){
elm.setAttribute('type', 'search');
elm.setAttribute('autosave', 'saved.data');
elm.setAttribute('results', '5');
elm.setAttribute('placeholder', DEF_VAL);
}else{
if(elm.getValue() == '') elm.setValue(DEF_VAL);
elm.addClassName('safari');
elm.observe('focus',function(){
if(elm.getValue() == DEF_VAL) elm.clear();
});
elm.observe('blur',function(){
if(elm.getValue() == '') elm.setValue(DEF_VAL);
});
}
});
Now, the CSS. The first part is for all browsers, and is specific to the layout I was working with. It gets my little search field to be the right size and shape and position:
form.search {
width: 140px;
float: right;
border-top: none;
margin-top: 42px;
margin-right: 30px;
text-align: right;
}
form.search input.search {
width: 130px;
font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
This next part is only needed for non-WebKit browsers:
form.search input.safari {
width: 92px;
font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
border: none;
color: #6f6f6f;
padding: 6px 20px 6px 24px;
background: url(../Resources/search.gif) no-repeat left center;
height: 14px;
}
form.search input.safari:focus {
color: #000;
background-image: url(../Resources/search_focus.gif);
overflow: visible;
}
The trick here is these background images are simple screenshots of a Safari window after the “search” field-type is applied.
In Photoshop, start with the focused variant, and erase the close ( x ) box from the right and the little drop-down triangle from the left (these will just confuse your non-WebKit users because they won’t do anything).
Then overlay another screenshot of the same field taken without focus. Erase the default text and the drop-down triangle.
Trim the image down to the very minimum you can get away with and still see the entire focus ring. Export two GIFs, one for the regular and one for the focused variant.
Now in your layout, you would just need the following:
<form class="search" ... >
<input type="text" class="search" name="q" value="<?=$search_text?>" />
</form>
In a Safari browser, you get the native behavior. In all other browsers, you get as near to the native behavior as possible. I’ll let you know when the example is on-line.
Walter
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options