Responsive search bar

index.slim

form.search
  input.searchTerm placeholder="Enter your search term ..."
  input.searchButton type="submit"

responsive-search-bar.markdown

Responsive search bar

A great technique of styling a search bar.

A Pen by dodozhang21 on CodePen.

License.

script.js

$('.searchButton').on('click',function(){
  alert('You clicked search button');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

@import url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
$iconColor: #fff;
$color: #8FC357;
.search {
  width: 100%;
  position: relative;
  &:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-family: 'FontAwesome';
    content: '\f002';
    background: $color;
    text-align: center;
    color: $iconColor;
    border-radius: 5px;
    -webkit-font-smoothing: subpixel-antialiased;
    font-smooth: always;
  }
}
.searchTerm {
  @include box-sizing(border-box);
  width: 100%;
  border: 5px solid $color;
  padding: 5px;
  height: 40px;
  border-radius: 5px;
  outline: none;
}
.searchButton {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  opacity: 0;
  cursor: pointer;
}