Skip to content

Instantly share code, notes, and snippets.

Created June 12, 2012 22:11
Show Gist options
  • Save anonymous/2920445 to your computer and use it in GitHub Desktop.
Save anonymous/2920445 to your computer and use it in GitHub Desktop.
Search Suggestions
/*
Search Suggestions
Original design by Visual Idiot - http://dribbble.com/shots/377281-Search-Suggestions
*/
html {
min-height: 100%;
background: -webkit-linear-gradient(#dbddde, #b6babb);
background: -moz-linear-gradient(top, #dbddde, #b6babb);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
body {
margin: 100px;
}
#s {
display: block;
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
padding: 5px 20px;
border-radius: 0px;
-moz-border-radius:200px;
width: 300px;
height: ;
color: #3a4449;
border: none;
outline: none;
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 1;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAcCAIAAACGS4oPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbtJREFUeNrsVd9LwlAU3ubYdudvsymUQULam2GpoWFFYFD900rh1EytB3/1lAbW1oOJgWK7HbPCh9hUbEX1cR/O/Th33+693z2HvL5tCQ4bRZLEF8PIMvQowoQeoPWTIgiK0BG/V4zW8cpGBtFLblI33jQaudx5q3UHsdvtCoW2VjyeacVIeNSLNiup+qjFbDZ1egYPf5SGMVYwju/EtsPhyZXMiNW+s0azmU6LRoQikfC63w9MpVrNZLJALi8NMU83imKGZdlYNLoZDBpfAQFMgUyLmTlb/7HTge/6/b5xEqZAttvtGQyidpAswyiKMswZT8OYpmmDwaC+9pOdYdXhdDopiqrUauNkrV4HUhAErLX8Y7yLqWIjEIAdFIul0uVVt/sEA4KLQhHEfL41PDHerO+wmNWtX65U8vlCv99XlOfhD1IGhmE4jkU8f7C/x3HcJGdoM6KhmF1LDCBJUrlclaT7wWAgCC6vd7Ver8nyA4e4w0QCIaQpZh+J2cwmcvpO3ev1ksmULMsWq/Xk+Egz32HiZ6/6YP3deBxKl4nnpyhXVtMsO5sWC2b+G/rZD2sx/536jx7jiwADANtP/9R/HghOAAAAAElFTkSuQmCC) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
#results {
list-style:none;
font-size: .725em;
line-height: 2;
background: -webkit-linear-gradient(#596369, #354044 80%);
background: -moz-linear-gradient(#596369, #354044 80%);
padding: 5px;
width: 290px;
border-radius: 3px;
margin: 24px auto;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
font-weight: 700;
box-shadow: 0 0 0 1px #19272e, inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.4);
position: relative;
z-index: 1;
}
#results:before {
content: '';
display:block;
width: 12px;
height: 12px;
position:absolute;
background:#596369;
z-index: 2;
top: -6px;
left: 16px;
transform: rotate(45deg);
box-shadow: inset 1px 1px 0 rgba(255,255,255,.1), -1px -1px 0 #19272e;
}
#results li {
padding: 0 12px;
cursor: pointer;
position: relative;
z-index: 3;
}
#results .selected {
background: linear-gradient(#45a2c4, #1a729f, #14608d 90%);
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.2);
}
<input id="s" type="search" placeholder="Who likes to rock the party?">
<ul id="results">
<li class="selected">Who Likes to Rock The Party</li>
<li>I Like to Rock The Party</li>
</ul>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment