Ajax Loader
HTML 
<!doctype html>
1
<!doctype html>
2
<html lang="en-US">
3
<head>
4
 
5
  <meta charset="utf-8">
6
 
7
  <title>Search</title>
8
 
9
  <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10
  <link rel="stylesheet" href="css/style.css">
11
 
12
  <!--[if lt IE 9]>
13
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
14
  <![endif]-->
15
 
16
</head>
17
 
18
<body>
19
 
20
  <div class="container">
21
22
    <div id="search">
23
 
24
      <form action="javascript:void(0);" method="GET">
25
 
26
        <fieldset class="clearfix">
27
 
28
          <input type="search" name="search" value="What are you looking for?" onBlur="if(this.value=='')this.value='What are you looking for?'" onFocus="if(this.value=='What are you looking for?')this.value='' "> <!-- JS because of IE support; better: placeholder="What are you looking for?" -->
29
          <input type="submit" value="Search" class="button">
30
 
31
        </fieldset>
32
 
33
      </form>
34
 
35
    </div> <!-- end search -->
36
 
37
  </div> <!-- end container -->
38
 
39
</body>
40
</html>
 
CSS 
@charset "utf-8";
1
@charset "utf-8";
2
/* CSS Document */
3
 
4
/* ---------- GENERAL ---------- */
5
 
6
body {
7
  background: #61646d;
8
  color: #000;
9
  font: 14px/1.5em "Open Sans", sans-serif;
10
  margin: 0;
11
}
12
 
13
fieldset {
14
  border: 0;
15
  margin: 0;
16
  padding: 0;
17
}
18
 
19
input {
20
  border: none;
21
  font-family: inherit;
22
  font-size: inherit;
23
  line-height: 1.5em;
24
  margin: 0;
25
  outline: none;
26
  padding: 0;
27
  -webkit-appearance: none;
28
}
29
 
30
input[type="search"]::-webkit-search-cancel-button {
31
  -webkit-appearance: none;
32
}
33
 
34
input[type="search"]::-webkit-search-decoration {
35
    -webkit-appearance: none;
36
}
37
 
38
.clearfix { *zoom: 1; }
39
.clearfix:before, .clearfix:after {
40
  content: "";
41
  display: table;
42
}
43
.clearfix:after { clear: both; }
44
 
45
.container {
46
  height: 44px;
47
  left: 50%;
48
  margin: -22px 0 0 -141px;
49
  position: absolute;
50
  top: 50%;
51
}
52
 
53
/* ---------- SEARCH ---------- */
54
 
55
#search {
56
  background: #42454e;
57
  border-radius: 3px;
58
  display: inline-block;
59
  padding: 7px;
60
}
61
 
62
#search input {
63
  float: left;
64
}
65
 
66
#search input[type="search"],
67
#search input[type="submit"] {
68
  border-radius: 3px;
69
  font-size: 12px;
70
}
71
 
72
#search input[type="search"] {
73
  background: #fff;
74
  color: #42454e;
75
  min-width: 184px;
76
  padding: 6px 8px;
77
}
78
 
79
#search input[type="submit"] {
80
  background: #1bba9a;
81
  color: #fff;
82
  font-weight: bold;
83
  margin-left: 7px;
84
  padding: 6px 10px;
85
}
86
 
87
#search input[type="submit"]:hover {
88
  background: #189e83;
89
}
90
 
91
#search input[type="search"]::-webkit-input-placeholder { color: #42454e; }
92
#search input[type="search"]:-moz-placeholder { color: #42454e; }
93
#search input[type="search"]:-ms-input-placeholder { color: #42454e; }
 

Search Bar

CSSDeck G+