SCSS/Compass styles for a simple search form.

simple-search.scss

#search-form {
  position:relative;
  @include trailer(1);

  input {
    margin:0;
    &[type=text] {
      color: #555;
      width:100%;
      border: 0;
      padding: 2px 30px 2px 5px;

      &:focus {
        outline:none;
      }
    }

    &[type=submit] {
      position:absolute;
      background-color: transparent;
      top: 50%;
      right: 0em;
      margin-top:-1em;
      content: "";
      text-indent: -9999px;
      background-image: url('../images/search-icon.png');
      background-position: 50% 50%;
      background-repeat:no-repeat;
      height: 2em;
      width: 2em;
      line-height:0;
      border:none;
      cursor:pointer;
      @include opacity(0.5);

      &:hover,
      &:focus,
      &:active {
        outline:none;
        @include opacity(1);
      }
    }
  }
}