Safari search boxes

Since I switched to Safari as my main browser, I notice these cute search input boxes from time to time. They don’t look like regular textfields but have rounded corners and take (among others) these additional parameters:

A picture of the rounded search box
  • placeholder="Text": Like the attribute says, a placeholder text can be defined. That means that a grey text appears when the field doesn’t have the focus and is otherwise empty.
  • autosave="id": Saves a history of the search terms the user entered. The list is shared among all inputs with the same autosave id. It is advised to use a certain format for the id.
  • incremental="uri": This allows Spotlight-like find-as-you-type behavior. Unfortunately, this is completely undocumented. It is not known what format the return value should have.

I always liked this input box and intended to use it with my new theme. However, the value search is non-standard which made me keep away from it. Instead, I wrote a Drupal module that adds a JavaScript file which in turn changes the type value of Drupal’s search boxes to search.

Comments

1
Blueberry on March 18, 2007

I agree, these things are quite awesome! I’d love to see the idea picked up in other major browsers (starting with mozilla and opera). It’s definitely a nice idea, exploiting the way browsers default to text input when they don’t understand the given type.

2
obagi nu derm on October 16, 2007

Hi, I love thi Safari feature, would like to see it on Mozilla firefox.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <div> <span> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <h4> <h5> <h6> <img> <br>
  • You can use Markdown syntax to format and style the text.
  • Web page addresses and e-mail addresses turn into links automatically.