Skip to content

Instantly share code, notes, and snippets.

@EEmmanuel7

EEmmanuel7/index.html

Created August 16, 2018 03:41
Show Gist options
  • Save EEmmanuel7/d2d165ef4ae0473653ac0b5427413e7d to your computer and use it in GitHub Desktop.
Save EEmmanuel7/d2d165ef4ae0473653ac0b5427413e7d to your computer and use it in GitHub Desktop.
Download ZIP
Twitter search form
Raw
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>
Raw
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>
Raw
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;
}
Raw
twitter-search-form.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment