Ajax Loader
HTML 
<h3>Demo : Beautiful Responsive Search Box Widget for Blogs and Websites</h3>
1
<h3>Demo : Beautiful Responsive Search Box Widget for Blogs and Websites</h3>
2
<p>Now you can put this search box inside your fluid sidebar, your fluid column, your fluid header, your fluid article, etc&hellip;. <div id='search-box'>
3
<form action='/search' id='search-form' method='get' target='_top'>
4
<input id='search-text' name='q' placeholder='Search Box' type='text'/>
5
<button id='search-button' type='submit'><span>Search</span></button>
6
</form>
7
</div>
8
<br /><b>Color Customization for this search box</b><hr />
9
<div class="ChooseColor">
10
  Choose Color : <input type="color" name="myColor" id="myColor" onclick="ChangeColor()" onChange="ChangeColor()"/> and Genrate code for search box.
11
</div>
12
 
13
<h3>HTML Markup</h3>
14
<pre><code>&lt;div id='search-box'&gt;
15
&lt;form action='/search' id='search-form' method='get' target='_top'&gt;
16
&lt;input id='search-text' name='q' placeholder='Search' type='text'/&gt;
17
&lt;button id='search-button' type='submit'&gt;                    
18
&lt;span&gt;Search&lt;/span&gt;
19
&lt;/button&gt;
20
&lt;/form&gt;
21
&lt;/div&gt;</code></pre>
22
 
23
<h3>CSS Code</h3>
24
<pre><code>#search-box {
25
position: relative;
26
width: 100%;
27
margin: 0;
28
}
29
 
30
#search-form
31
{
32
height: 40px;
33
border: 1px solid #999;
34
-webkit-border-radius: 5px;
35
-moz-border-radius: 5px;
36
border-radius: 5px;
37
background-color: #fff;
38
overflow: hidden;
39
}
40
 
41
#search-text
42
{
43
font-size: 14px;
44
color: #ddd;
45
border-width: 0;
46
background: transparent;
47
}
48
 
49
#search-box input[type="text"]
50
{
51
width: 90%;
52
padding: 11px 0 12px 1em;
53
color: #333;
54
outline: none;
55
}
56
 
57
#search-button {
58
position: absolute;
59
top: 0;
60
right: 0;
61
height: 42px;
62
width: 80px;
63
font-size: 14px;
64
color: #fff;
65
text-align: center;
66
line-height: 42px;
67
border-width: 0;
68
background-color:<span id="ColorCode">#ColourCode</span>;
69
-webkit-border-radius: 0px 5px 5px 0px;
70
-moz-border-radius: 0px 5px 5px 0px;
71
border-radius: 0px 5px 5px 0px;
72
cursor: pointer;
73
}</code></pre>
74
 
75
 
76
<span style="float:right;font-size:10px;">Created By : <a href="http://www.pawanmall.net/" target="_blank">Pawan Mall</a></span>
 
CSS 
/*
1
/*
2
// Responsive Search Box Widget
3
// Made with ❤ by @Pawan_Mall
4
// http://www.pawanmall.net
5
*/
6
 
7
#search-box {
8
position: relative;
9
width: 100%;
10
margin: 0;
11
}
12
 
13
#search-form
14
{
15
height: 40px;
16
border: 1px solid #999;
17
-webkit-border-radius: 5px;
18
-moz-border-radius: 5px;
19
border-radius: 5px;
20
background-color: #fff;
21
overflow: hidden;
22
}
23
#search-text
24
{
25
font-size: 14px;
26
color: #ddd;
27
border-width: 0;
28
background: transparent;
29
}
30
#search-box input[type="text"]
31
{
32
width: 90%;
33
padding: 11px 0 12px 1em;
34
color: #333;
35
outline: none;
36
}
37
 
38
#search-button {
39
position: absolute;
40
top: 0;
41
right: 0;
42
height: 42px;
43
width: 80px;
44
font-size: 14px;
45
color: #fff;
46
text-align: center;
47
line-height: 42px;
48
border-width: 0;
49
background-color: #4d90fe;
50
-webkit-border-radius: 0px 5px 5px 0px;
51
-moz-border-radius: 0px 5px 5px 0px;
52
border-radius: 0px 5px 5px 0px;
53
cursor: pointer;
54
}
55
 
56
 
57
 
58
 
59
 
60
/* Ignore this! */
61
body {
62
  background-color:#EDEDE8;
63
  font:normal normal 16px/1.4 "Open Sans",Segoe,"Segoe UI",Frutiger,"Frutiger Linotype","DejaVu Sans","Helvetica Neue",Arial,Sans-Serif;
64
  color:#333;
65
  text-shadow:0 1px 0 white;
66
  padding:10px 0 0 10px;
67
  margin:5%;
68
}
69
 
70
p, pre {margin:0 10px 10px 0}
71
 
72
code {
73
  font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
74
  font-size:14px;
75
}
76
 
77
pre {
78
  line-height:1.2;
79
  background-color:white;
80
  padding:1em;
81
  overflow:auto;
82
  border-radius:3px;
83
  box-shadow:0 1px 1px rgba(0,0,0,.1);
84
}
85
 
86
.cm {
87
  color:#999;
88
  font-style:italic;
89
}
90
 
91
h3 {
92
  font-weight:bold;
93
  margin:20px 10px 10px 0;
94
}
95
.ChooseColor input[type="color"]
96
{
97
  width: 5%;
98
  -webkit-border-radius: 50px;
99
  -moz-border-radius:50px;
100
  border-radius:50px;
101
  cursor: pointer;
102
  padding:5px;
103
}
 
JavaScript 
// Responsive Search Box Widget
1
// Responsive Search Box Widget
2
// Made with ❤ by @Pawan_Mall
3
// http://www.pawanmall.net
4
 
5
function ChangeColor() {
6
  var color = document.getElementById('myColor').value;
7
  document.getElementById('ColorCode').style.color = color;
8
  document.getElementById('search-button').style.background = color;
9
  document.getElementById("ColorCode").innerHTML = color;
10
}
11
 
12
 
 

Beautiful Responsive Search Box Widget for Blogs and Websites

CSSDeck G+