public
Created

Search Suggestions

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
/*
Search Suggestions
Original design by Visual Idiot - http://dribbble.com/shots/377281-Search-Suggestions
*/
 
html {
min-height: 100%;
background: -webkit-linear-gradient(#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: 12px 48px 12px 12px;
border-radius: 200px;
width: 300px;
height: 16px;
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%);
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);
}
dabblet.html
HTML
1 2 3 4 5 6
 
<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>
settings.json
JSON
1
{"view":"split","prefixfree":"1","page":"css"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.