Style search field

layouts/articles.html

@@ -27,13 +27,16 @@
       %>
       <li><a href="<%= path %>"<%= %Q{class="active"} if @item.identifier == path %>><%= label %></a> (<%= count %>)</li>
       <% end %>
+      <li id="search">
+        <fieldset>
+          <label for="query">Search</label>
+          <input type="text" name="q" id="query" value="" />
+          <!-- <input type="submit" name="submitquery" id="submitquery" value="Go" />  -->
+          <span class="sbox_r"></span>
+        </fieldset>
+      </li>
     </ul>
 
-    <div id="search">
-      <label>Quick Search:</label>
-      <input type="text" name="q" />
-    </div>
-
     <ul class="articles">
       <%= yield %>
     </ul>

output/css/style.css

@@ -227,3 +227,52 @@ ul.menu li:first-child {
 #flickr li img:hover {
   top: -75px;
 }
+
+/* Search Form //----------------------------------------------------------*/
+/* Via http://www.brandspankingnew.net/archive/2005/08/adding_an_os_x.html */
+#search {
+  margin: 0;
+  padding: 0;
+  display: block;
+  float: left;
+  margin-right: 20px;
+  background: #fff url(/images/srch_l.gif) 0 0 no-repeat;
+  padding-left: 19px;
+}
+#search fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+#search label { 
+  color: #999; 
+  display: none; 
+}
+#search input { 
+  /* Reset (for Safari) */
+  border: 0;
+  margin: 0;
+  outline: 0;
+  vertical-align: middle;
+  height: 19px; 
+  width: 180px; 
+  width: 132px;
+  padding: 3px;
+
+  background: #fff url(/images/srch_bg.gif) 0 0 repeat-x;
+  float: left;
+  font: 11px/13px "Lucida Grande", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif;
+  color: #000;
+}
+#search .sbox_r {
+  background: #fff url(/images/srch_r.gif) 0 0 no-repeat;
+  float: left;
+  width: 19px;
+  height: 19px;
+}
+#search .sbox_r_f2 {
+  background: #fff url(/images/srch_r.gif) 0 -19px no-repeat;
+  float: left;
+  width: 19px;
+  height: 19px;
+}

output/js/articles.js

@@ -78,6 +78,11 @@
       // the event now, to handle the hash the page may have loaded with.
       $(window).trigger('hashchange', true);
       $('.pagination').slideDown('fast');
+      
+      if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) {
+        // WebKit browser
+        $('#search input').css('paddingTop', 0);
+      }
     });
   };