Search box with placeholder text for Shopify

gistfile1.html

<form action="/search" method="get" id="search">
  <p>
    <label class="move" for="searchtext">Search</label>
    <input type="search" id="searchtext" name="q" placeholder="Search" />
    <input type="image" id="searchbutton" src="{{ 'icon-search.gif' | asset_url }}" alt="Search" />
  </p>
</form>

<style>
#search p {
  position: relative;
  line-height: 1.5;
}
.move {
  position: absolute;
  left: -9999px;
}
input[type="text"], textarea, #searchtext {
  border: 1px solid #D6D6D6;
  padding: 7px 6px;
  width: 187px;
  moz-appearance: none;
  -webkit-appearance: none;
  -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
}
#searchtext {
  background: white;
  padding-right: 28px;
  float: right;
}
#searchbutton {
  position: absolute;
  right: 10px;
  top: 0.5em;
}
.hint {
  color: #ddd;
}
</style>

<script>
var elementSupportsAttribute = function(element, attribute) { 
  var test = document.createElement(element); 
  if (attribute in test) {
    return true; 
  } 
  else {
    return false;
  }
}

// Example of usage
if (!elementSupportsAttribute('input','placeholder')) {
  jQuery('#searchtext').focus(function() {
    if (jQuery(this).val() === jQuery(this).attr('placeholder')) {
      jQuery(this).val('').removeClass('hint');
    }
  }).blur(function() {
    if (jQuery(this).val() === '') {
      jQuery(this).val(jQuery(this).attr('placeholder')).addClass('hint');
    }
  });
}
</script>