Safari-style search field polyfill; requires Prototype.js, no other dependencies

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');
        reset.setStyle('-moz-border-radius: 11px; border-radius: 9px; background-color: #cecece; color: #fff; position: absolute; right: 4px; top: 4px; padding: 0 4px 3px; cursor: pointer; font: bold 11px/11px "Lucida Grande", Lucida, Verdana, sans-serif; ');
        wrapper.insert(reset);
        reset.observe('click',function(evt){
          this.stopObserving().remove();
          element.clear().focus();
        });
        var inputColor = new Element('input',{type:'text'}).getStyle('color');
        element.setStyle('color: ' + inputColor);
        element.focus();
      }
      return element;
    },
    removeResetButton: function(element){
      var element = $(element);
      if( element.next('.search-reset') ) element.next('.search-reset').stopObserving().remove();
      return element;
    }
  });

  if(( q.type != 'search' ) || ( ! Prototype.Browser.WebKit )){
    var inputColor = new Element('input',{type:'text'}).getStyle('color');
    var placeholder = q.readAttribute('placeholder');
    var w = q.getWidth();
    q.setStyle('background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAIAAAD5fKMWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNDYwQkEyMzc1NzYxMUUxQjRDNUIyRTNENEYxNzg4QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNDYwQkEyNDc1NzYxMUUxQjRDNUIyRTNENEYxNzg4QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0NjBCQTIxNzU3NjExRTFCNEM1QjJFM0Q0RjE3ODhBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0NjBCQTIyNzU3NjExRTFCNEM1QjJFM0Q0RjE3ODhBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HKQX5gAAAVxJREFUeNqMUruOglAUXEATIiRKIyE+K7UQaegMFZ/gHxg/j/gH/gCPQgsw8RmFYKKVJCiJgLPrBh/N7i1OLsMwZ+YciDRNv/59cq8Pl8tlsVg4jrNcLgVBaLfb3W63WCxmBCLTPp/Pk8nEMAwgBPGLy7KsqmqpVPrUns1muq43m81er1etVvf7PRDLssrlsqIon2wYQJUkSRTFfD7PcRxFUbvdDni/3ydJ8slGX8/zcOl0OjRNg4fXrVYLiOu6SZI82GSmXavVUDebDajfMrncdruFSqVSQYwwDN/YmACqaZrT6TSKIlTcwavX68ALhcLTCVB4QFMkW6/XGQjt+XyOlCzLvk0wjuPD4WDb9mq18n0f8240Goh4Op14nh+NRgzDEK+7vN1u1+sVNvAl9XOCIBiPx1CB++Fw+LZLJIMALD4WBATzGQwGmqZhzRAi/vxP0Op4PGKI8HYXYAAHY7XScjZCmAAAAABJRU5ErkJggg==) no-repeat left center; padding-left: 18px; padding-right: 18px; -moz-border-radius: 11px; border-radius: 11px; width: ' + (w - 38) + 'px');
    if(q.getValue() != placeholder && q.getValue() != ''){
      q.addResetButton();
    }else{
      q.setValue(placeholder).setStyle('color: gray');
    }
    q.observe('focus',function(evt){
      if($F(q) == placeholder){
        q.clear().setStyle('color: ' + inputColor);
      }
    });
    q.observe('blur',function(evt){
      if($F(q) == ''){
        q.setValue(placeholder).setStyle('color: gray').removeResetButton();
      }
    });
    q.observe('keyup', function(evt){
      if(($F(this) != '') && ($F(this) != placeholder)){
        this.addResetButton();
      }
    });
  }
});