Safari- or Chrome-style search fields in non-WebKit browsers

waltd · April 3, 2012, 3:12pm

Here’s a polyfill for Safari search fields (rounded ends, little magnifier, reset button if the placeholder isn’t showing) that doesn’t need any external files (besides Prototype.js):

gist.github.com

https://gist.github.com/walterdavis/2292393

gistfile1.js

//naturally, requires Prototype.js be already loaded
document.observe('dom:loaded',function(){
  var q = $('q'); //your search element, must be an <input type="search" />
  Element.addMethods({
    addResetButton: function(element){
      var element = $(element);
      if(! element.next('.search-reset') && ( ! Prototype.Browser.WebKit ) ){
        var wrapper = ( !!element.up('.search-reset-wrapper') ) ? element.up('.search-reset-wrapper') : element.wrap('span',{style:'position:relative; overflow:hidden;', 'class': 'search-reset-wrapper'});
        var reset = new Element('span',{'class': 'search-reset'});
        reset.insert('x');

This file has been truncated. show original

Even the little magnifier icon is handled by the script – as a data URI background image.

I haven’t tested it on anything lower than IE8, but my guess is that it would degrade to a normal-looking text input field and the cancel button would have square edges. Any brave soul with an elderly browser want to try it out?

http://lf.walterdavisstudio.com/responsive

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options