Code Snippet </> Info
Snippet Name: CSS3 Search Form Box
Description: Add a CSS3 search form box to your web page. Example: View Code Demo
Note:
Author: SnapBuilder <snippets@snapbuilder.com>
Last Modified: 2019-12-09 00:33:01
Language: css
Highlight Mode: css
|
Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
Copied To Clipboard!
<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS3 Search Form Box</title>
<style>
/* Begin HTML5 CSS3 Search Form Box */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0; padding:15px 15px 15px 15px;}
.searchform {
display:inline-block;
zoom:1; /* ie7 hack for display:inline-block */
*display:inline;
border:solid 1px #d2d2d2;
padding:3px 5px;
-webkit-border-radius:2em;
-moz-border-radius:2em;
border-radius:2em;
-webkit-box-shadow:0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 0px rgba(0,0,0,.1);
box-shadow:0 1px 0px rgba(0,0,0,.1);
background:#f1f1f1;
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {font:normal 12px/100% Arial, Helvetica, sans-serif;}
.searchform .searchfield {
background:#fff;
padding:6px 6px 6px 8px;
width:202px;
border:solid 1px #bcbbbb;
outline:none;
-webkit-border-radius:2em;
-moz-border-radius:2em;
border-radius:2em;
-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color:#fff;
border:solid 1px #494949;
font-size:11px;
height:27px;
width:27px;
text-shadow:0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius:2em;
-moz-border-radius:2em;
border-radius:2em;
background:#5f5f5f;
background:-webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background:-moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
</style>
</head>
<body>
<div id="content">
<h3>HTML5 CSS3 Search Form Box</h3>
<p>Click your mouse inside the search box.</p>
<form class="searchform">
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="button" value="Go" />
</form>
<br /><br />
<div align="left">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_207.html">HTML5 CSS3 Search Form Box Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|