Ajax Loader
HTML
<input id="s" type="search" placeholder="Who likes to rock the party?">
1
<input id="s" type="search" placeholder="Who likes to rock the party?">
2
<ul id="results">
3
    <li>Who Likes to Rock The Party</li>
4
    <li>I Like to Rock The Party</li>
5
</ul>
 
CSS
html {
1
html {
2
    min-height: 100%;
3
  
4
    background: -webkit-linear-gradient(#dbddde, #b6babb);
5
    background: -moz-linear-gradient(#dbddde, #b6babb);
6
    background: -ms-linear-gradient(#dbddde, #b6babb);
7
    background: -o-linear-gradient(#dbddde, #b6babb);
8
    background: linear-gradient(#dbddde, #b6babb);
9
  
10
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
11
    -webkit-font-smoothing: antialiased;
12
}
13
 
14
body {
15
    margin: 50px;
16
}
17
 
18
#s {
19
    display: block;
20
    margin: 0 auto;
21
    -webkit-appearance: none;
22
    -moz-appearance: none;
23
    padding: 12px 48px 12px 12px;
24
  
25
    -webkit-border-radius: 200px;
26
    -moz-border-radius: 200px;
27
    border-radius: 200px;
28
  
29
  width: 300px;
30
    height: 16px;
31
    color: #3a4449;
32
    border: none;
33
    outline: none;
34
  
35
    -webkit-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);
36
    -moz-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);
37
    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);
38
  
39
  position: relative;
40
    z-index: 2;
41
    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;
42
 
43
}
44
 
45
#s:focus ~ #results {
46
  opacity: 1;
47
  top: auto;
48
}
49
 
50
#s::-webkit-input-placeholder, #s:-moz-placeholder {
51
    color: #607078;
52
}
53
 
54
#results {
55
    list-style:none;
56
    font-size: .725em;
57
  
58
    background: -webkit-linear-gradient(#596369, #354044 80%);
59
    background: -moz-linear-gradient(#596369, #354044 80%);
60
    background: -ms-linear-gradient(#596369, #354044 80%);
61
    background: -o-linear-gradient(#596369, #354044 80%);
62
    background: linear-gradient(#596369, #354044 80%);
63
  
64
  -webkit-transition: all .4s ease;
65
  -moz-transition: all .4s ease;
66
  -ms-transition: all .4s ease;
67
  -o-transition: all .4s ease;
68
  transition: all .4s ease;
69
  
70
  opacity: 0;
71
  top: 20px;
72
    padding: 5px;
73
    width: 290px;
74
  
75
    -webkit-border-radius: 3px;
76
    -moz-border-radius: 3px;
77
    border-radius: 3px;
78
  
79
    margin: 24px auto;
80
    color: #fff;
81
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
82
    font-weight: 700;
83
  
84
    -webkit-box-shadow: 0 0 0 1px #19272e, inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.4);
85
    -moz-box-shadow: 0 0 0 1px #19272e, inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.4);
86
    box-shadow: 0 0 0 1px #19272e, inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.4);
87
    
88
  position: relative;
89
    z-index: 1;
90
}
91
 
92
#results:before {
93
    content: '';
94
    display:block;
95
    width: 12px;
96
    height: 12px;
97
    position:absolute;
98
    background:#596369;
99
    z-index: 2;
100
    top: -6px;
101
    left: 16px;
102
  
103
    -webkit-transform: rotate(45deg);
104
    -moz-transform: rotate(45deg);
105
    -ms-transform: rotate(45deg);
106
    -o-transform: rotate(45deg);
107
    transform: rotate(45deg);
108
  
109
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,.1), -1px -1px 0 #19272e;
110
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255,.1), -1px -1px 0 #19272e;
111
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.1), -1px -1px 0 #19272e;
112
}
113
 
114
#results li {
115
    padding: 5px 12px;
116
    cursor: pointer;
117
    position: relative;
118
    z-index: 4;
119
}
120
 
121
#results li:hover {
122
    background: -webkit-linear-gradient(#45a2c4, #1a729f, #14608d 90%);
123
    background: -moz-linear-gradient(#45a2c4, #1a729f, #14608d 90%);
124
    background: -ms-linear-gradient(#45a2c4, #1a729f, #14608d 90%);
125
    background: -o-linear-gradient(#45a2c4, #1a729f, #14608d 90%);
126
    background: linear-gradient(#45a2c4, #1a729f, #14608d 90%);
127
  
128
    -webkit-border-radius: 3px;
129
    -moz-border-radius: 3px;
130
    border-radius: 3px;
131
  
132
    -webkit-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);  
133
    -moz-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);  
134
    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);  
135
}
 

Simple Search Bar With Suggestions

CSSDeck G+