Top Search

The top search box is a stripped down search tool offering a combination of a categories dropdown and a keywords box. It is an INLINE STYLE form.

The form uses the following markup:

  <form action="/search.html" method="get">
    <fieldset>
      <label for="cat-select" class="select">
        Search in
        <select id="cat-select">
          <option value="">(any)</option>
          <option value="Merchandise">Merchandise</option>
          ....
        </select>
      </label>
      <label for="keywords" class="text">
        for
        <input id="keywords" value="" size="20" />
      </label>
      <input type="submit" class="submit" value="Go" />
      <a href="/search.html" title="Refine your search">Advanced Search</a>
      <input type="hidden" name="action" value="update" />
    </fieldset>
  </form>

The main things to notice are:

• the <label>s are designed to be treated as inline elements here. They (and the <input>s within) can be selected via the .text or .select class.
• The submit button has the .submit class as per the form conventions.
• There is only one link in this BOX so you can select it specifically like so:
  #top-search a { color: red; }