Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Forms and Inputs >> CSS3 Search Form Box


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: 2015-08-26 22:31:48

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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 http://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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library