Twitter search form

index.html

<!-- search form -->
<div id="wrap">
<form id="nav-search" class="form-search" action="/search" role="search">
  <input id="search-query" class="search-input" type="text" placeholder="Search" />
    <button class="icon" type="submit"></button>
  </form>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s.cdpn.io/53198/usersnap-footer-tidbits.js"></script>

style.css

/* search form */
#wrap{
  text-align:center;
}
#nav-search {
  margin: 0 auto;
  position: relative;
  width: 202px;
}

#nav-search input{
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  display: block;
  width: 163px;
  height: 14px;
  padding: 6px 27px 6px 12px;
  cursor: pointer;
  color: rgb(102, 102, 102);
  background-color: rgb(204, 204, 204);
  border: none;
  border-radius: 13px 13px 13px 13px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
}

#nav-search .icon {
  position: absolute;
  display: block;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 15px;
  background: url("https://abs.twimg.com/a/1374049044/t1/img/twitter_web_sprite_icons.png") -20px -710px no-repeat transparent;
  border: none;
  text-indent: -200px;
  padding: 0;
  cursor: pointer;
}

twitter-search-form.markdown

Twitter search form

How-to recreate the Twitter search form using HTML & CSS.

A Pen by Usersnap on CodePen.

License.