{"id":9687,"date":"2011-05-03T21:20:30","date_gmt":"2011-05-03T13:20:30","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=9687"},"modified":"2025-04-04T01:04:30","modified_gmt":"2025-04-03T17:04:30","slug":"css3-search-field","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/","title":{"rendered":"How to Create a Beautiful CSS3 Search Box"},"content":{"rendered":"<p><a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\">CSS3<\/a> is the new age of styling for web pages. It brings forward fresh and innovative tools like shadows, animations, transitions, rounded corners, and more. Though the official guidelines aren\u2019t set in stone, many browsers are already embracing these features.<\/p>\n<p>This guide will show you how to use tools such as <code>text-shadow<\/code>, <code>border-radius<\/code>, <code>box-shadows<\/code>, and transitions to design a sleek search box.<\/p>\n<p>While the original design for this search box came from Alvin Thong, I\u2019ve aimed to replicate it using only CSS3. However, remember that <strong>not every browser supports all CSS3 tools<\/strong>. So, to follow along, make sure you\u2019re using a <a href=\"https:\/\/www.normansblog.de\/demos\/browser-support-checklist-css3\/\">recent browser<\/a> compatible with CSS3.<\/p>\n<p>Are you ready? Let\u2019s dive in!<\/p>\n<h2>1. Starting with The HTML5 Doctype<\/h2>\n<p>Let\u2019s kick things off with the HTML structure. Begin with the <code>&lt;!DOCTYPE html&gt;<\/code> which signifies HTML5 and then move on to the <code>&lt;head&gt;<\/code> section. Next, within the <code>&lt;body&gt;<\/code>, there\u2019s a <code>&lt;section&gt;<\/code> with an ID labeled as <code>#wrapper<\/code>. This is primarily to set the content box\u2019s width and align it center on the page.<\/p>\n<p>Subsequent to that, there\u2019s a <code>&lt;div&gt;<\/code> bearing the ID <code>#main<\/code>. This particular ID encapsulates styles that sketch out the prominent white boundary around both the input area and the search button. Inside this <code>&lt;div&gt;<\/code>, a <code>&lt;form&gt;<\/code> is declared. This form integrates the <em>text input field<\/em> and the <em>search button<\/em>. To give you a clear picture, here\u2019s how the form appears without any styling:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/without-css.jpg\" alt=\"Form without CSS\" width=\"500\" height=\"88\"><\/figure>\n<p>And, here\u2019s the raw code:<\/p>\n<pre>\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n    &lt;head&gt;\r\n        &lt;title&gt;CSS3 Search Field&lt;\/title&gt;\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n        &lt;section id=\"wrapper\"&gt;\r\n            &lt;h1&gt;CSS3 Search Field&lt;\/h1&gt;\r\n            &lt;div id=\"main\"&gt;\r\n                &lt;form&gt;\r\n                    &lt;input type=\"text\" id=\"search\"&gt;\r\n                    &lt;input type=\"submit\" class=\"solid\" value=\"Search\"&gt;\r\n                &lt;\/form&gt;\r\n            &lt;\/div&gt;&lt;!--main--&gt;\r\n        &lt;\/section&gt;&lt;!--wrapper--&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h2>2. Creating the Boudning Box<\/h2>\n<p>We start by framing a large box around the form. This is done by styling the <code>&lt;div&gt;<\/code> that carries the ID of <code>#main<\/code>. As shown below, the box is designed with a width of 400px and a height of 50px.<\/p>\n<pre>\r\n#main { \r\n    width: 400px; \r\n    height: 50px; \r\n    background: #f2f2f2; \r\n    padding: 6px 10px; \r\n    border: 1px solid #b5b5b5;\r\n    -moz-border-radius: 5px; \r\n    -webkit-border-radius: 5px; \r\n    border-radius: 5px; \r\n    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; \r\n    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; \r\n    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; \r\n}\r\n<\/pre>\n<p>Key things to note are the <code>border-radius<\/code> and the <code>box-shadow<\/code> declarations. To achieve the rounded corners, we utilize the CSS3 border-radius. The prefixes \u201c-moz-\u201d and \u201c-webkit-\u201d ensure compatibility across gecko and webkit-based browsers. The box shadow definitions may seem intricate, but they\u2019re rather straightforward:<\/p>\n<pre>\r\nbox-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;\r\n<\/pre>\n<h3>Explaination:<\/h3>\n<p>The term \u201cinset\u201d dictates if the shadow is internal to the box. The initial two zeros represent x-offset and y-offset respectively, while 3px is the blur radius. Following that, there\u2019s the color specification using rgba (red, green, blue, and alpha for opacity). Observe that five shadow declarations are combined, separated by commas. The first duo imparts the inner white glow, and the subsequent three render the box its robust appearance.<\/p>\n<p>Experiment with these parameters to gain a deeper understanding.<\/p>\n<h3>Preview:<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/search-box.jpg\" alt=\"Styled search box\" width=\"500\" height=\"223\"><\/figure>\n<h2>3. Styling Input Field<\/h2>\n<p>With the enclosing box ready, our next focus is on the input field\u2019s styling.<\/p>\n<pre>\r\ninput[type=\"text\"] { \r\n    float: left; \r\n    width: 230px; \r\n    padding: 15px 5px 5px 5px; \r\n    margin-top: 5px; \r\n    margin-left: 3px; \r\n    border: 1px solid #999999;\r\n    -moz-border-radius: 5px; \r\n    -webkit-border-radius: 5px; \r\n    border-radius: 5px; \r\n    -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; \r\n    -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; \r\n    box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; \r\n}\r\n<\/pre>\n<p>The styling for the input field is largely reminiscent of what we applied to the main box, <code>#main<\/code>. A consistent border radius of 5px is maintained. And similar to our previous approach, multiple box-shadows are combined.<\/p>\n<pre>\r\nbox-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; \r\n<\/pre>\n<h3>Explaination:<\/h3>\n<p>This iteration offers a stark shadow by keeping the shadow blur at zero. A vertical offset of 5px enhances the visual appeal. The subsequent shadow declarations maintain the blur at 0px, varying only in color and y-offset. Adjusting these values can yield a spectrum of effects, so feel free to experiment.<\/p>\n<h3>Preview:<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/with-search-box.jpg\" alt=\"Styled input field\" width=\"500\" height=\"223\"><\/figure>\n<h2>4. Styling Submit Button<\/h2>\n<p>Now, let\u2019s shift our attention to the search button\u2019s styling.<\/p>\n<pre>\r\ninput[type=\"submit\"].solid { \r\n    float: left; \r\n    cursor: pointer; \r\n    width: 130px; \r\n    padding: 8px 6px; \r\n    margin-left: 20px; \r\n    background-color: #f8b838; \r\n    color: rgba(134, 79, 11, 0.8); \r\n    text-transform: uppercase; \r\n    font-weight: bold; \r\n    border: 1px solid #99631d;\r\n    -moz-border-radius: 5px; \r\n    -webkit-border-radius: 5px; \r\n    border-radius: 5px; \r\n    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9); \r\n    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; \r\n    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; \r\n    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; \r\n    -webkit-transition: background 0.2s ease-out; \r\n}\r\n<\/pre>\n<p>Although the search button adopts colors distinct from the enclosing box, they share several stylistic elements, like the border-radius and box-shadow. A fresh addition here is the <code>text-shadow<\/code>.<\/p>\n<pre>\r\ntext-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9); \r\n<\/pre>\n<h3>Explaination:<\/h3>\n<p>In the <code>text-shadow<\/code> command, the initial three figures represent x-offset, y-offset, and blur respectively. The rgba codes determine the shadow\u2019s hue. The subsequent declaration, separated by a comma, carries a y-offset valued at -1, giving the text an \u201cinner shadow\u201d essence. When interacted with, the submit button\u2019s background and shadow subtly transform.<\/p>\n<h3>Preview:<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/with-search-button.jpg\" alt=\"Styled submit button\" width=\"500\" height=\"223\"><\/figure>\n<h2>\u201cActive\u201d State for the Button<\/h2>\n<p>When the button is in its \u201cactive\u201d state, there are some notable changes. Specifically, the button is set to a \u2018relative\u2019 position with a \u2018top\u2019 value of 5px. This creates the illusion that when pressed, the button actually moves downwards by 5 pixels. This subtle shift makes it seem more interactive and intuitive. There are also alterations to the background color and shadows. An important observation is the reduction of the y-offset for the shadows, which further reinforces the \u201cpressed down\u201d effect. Here\u2019s the styling for the active state:<\/p>\n<pre>\r\ninput[type=\"submit\"].solid:active { \r\n    background: #f6a000; \r\n    position: relative; \r\n    top: 5px; \r\n    border: 1px solid #702d00;\r\n    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; \r\n    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; \r\n    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; \r\n}\r\n<\/pre>\n<h2>Complete CSS Code<\/h2>\n<p>We\u2019ve finished designing our search field using several new CSS3 features. Below is the full CSS and HTML code for this search field.<\/p>\n<pre>\r\n #main {\r\n    width: 400px;\r\n    height: 50px;\r\n    background: #f2f2f2;\r\n    padding: 6px 10px;\r\n    border: 1px solid #b5b5b5;\r\n    border-radius: 5px;\r\n    -moz-border-radius: 5px;\r\n    -webkit-border-radius: 5px;\r\n    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;\r\n    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;\r\n    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;\r\n}\r\n\r\ninput[type=\"text\"] {\r\n    float: left;\r\n    width: 230px;\r\n    padding: 15px 5px 5px 5px;\r\n    margin-top: 5px;\r\n    margin-left: 3px;\r\n    border: 1px solid #999999;\r\n    border-radius: 5px;\r\n    -moz-border-radius: 5px;\r\n    -webkit-border-radius: 5px;\r\n    box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;\r\n    -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;\r\n    -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;\r\n}\r\n\r\ninput[type=\"submit\"].solid {\r\n    float: left;\r\n    cursor: pointer;\r\n    width: 130px;\r\n    padding: 8px 6px;\r\n    margin-left: 20px;\r\n    background-color: #f8b838;\r\n    color: rgba(134, 79, 11, 0.8);\r\n    text-transform: uppercase;\r\n    font-weight: bold;\r\n    border: 1px solid #99631d;\r\n    border-radius: 5px;\r\n    -moz-border-radius: 5px;\r\n    -webkit-border-radius: 5px;\r\n    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);\r\n    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;\r\n    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;\r\n    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;\r\n    -webkit-transition: background 0.2s ease-out;\r\n}\r\n\r\ninput[type=\"submit\"].solid:hover,\r\ninput[type=\"submit\"].solid:focus {\r\n    background: #ffd842;\r\n    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;\r\n    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;\r\n    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;\r\n}\r\n\r\ninput[type=\"submit\"].solid:active {\r\n    background: #f6a000;\r\n    position: relative;\r\n    top: 5px;\r\n    border: 1px solid #702d00;\r\n    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;\r\n    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;\r\n    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;\r\n}\r\n<\/pre>\n<p>I hope you enjoyed this tutorial. Feel free to experiment with these features.<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like shadows, animations, transitions, rounded corners, and more. Though the official guidelines aren\u2019t set in stone, many browsers are already embracing these features. This guide will show you how to use tools such as text-shadow, border-radius, box-shadows, and&hellip;<\/p>\n","protected":false},"author":204,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[298,507,506,2016,286],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Beautiful CSS3 Search Box - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like shadows, animations, transitions, rounded corners, and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Beautiful CSS3 Search Box\" \/>\n<meta property=\"og:description\" content=\"CSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like shadows, animations, transitions, rounded corners, and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2011-05-03T13:20:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:04:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/without-css.jpg\" \/>\n<meta name=\"author\" content=\"Bharani M\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bharani M\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/\"},\"author\":{\"name\":\"Bharani M\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/6c4cc0d9470c96a53f074757818755cb\"},\"headline\":\"How to Create a Beautiful CSS3 Search Box\",\"datePublished\":\"2011-05-03T13:20:30+00:00\",\"dateModified\":\"2025-04-03T17:04:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/\"},\"wordCount\":747,\"commentCount\":49,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-seach-box\\\/without-css.jpg\",\"keywords\":[\"Buttons\",\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/\",\"name\":\"How to Create a Beautiful CSS3 Search Box - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-seach-box\\\/without-css.jpg\",\"datePublished\":\"2011-05-03T13:20:30+00:00\",\"dateModified\":\"2025-04-03T17:04:30+00:00\",\"description\":\"CSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like shadows, animations, transitions, rounded corners, and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-seach-box\\\/without-css.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-seach-box\\\/without-css.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-search-field\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Beautiful CSS3 Search Box\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/6c4cc0d9470c96a53f074757818755cb\",\"name\":\"Bharani M\",\"description\":\"Bharani is a designer\\\/developer from New Delhi, India. He is currently working on Resumonk.com - an online resume builder that helps you create a professional and beautiful resume in minutes. Also check out his side project - Quotescube.com - your daily dose of quotes.\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/bharanim\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Beautiful CSS3 Search Box - Hongkiat","description":"CSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like shadows, animations, transitions, rounded corners, and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Beautiful CSS3 Search Box","og_description":"CSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like shadows, animations, transitions, rounded corners, and","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2011-05-03T13:20:30+00:00","article_modified_time":"2025-04-03T17:04:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/without-css.jpg","type":"","width":"","height":""}],"author":"Bharani M","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Bharani M","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/"},"author":{"name":"Bharani M","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/6c4cc0d9470c96a53f074757818755cb"},"headline":"How to Create a Beautiful CSS3 Search Box","datePublished":"2011-05-03T13:20:30+00:00","dateModified":"2025-04-03T17:04:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/"},"wordCount":747,"commentCount":49,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/without-css.jpg","keywords":["Buttons","CSS","HTML","HTML5 \/ CSS3 Tutorials","tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-search-field\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/","name":"How to Create a Beautiful CSS3 Search Box - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/without-css.jpg","datePublished":"2011-05-03T13:20:30+00:00","dateModified":"2025-04-03T17:04:30+00:00","description":"CSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like shadows, animations, transitions, rounded corners, and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-search-field\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/without-css.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-seach-box\/without-css.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Beautiful CSS3 Search Box"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/6c4cc0d9470c96a53f074757818755cb","name":"Bharani M","description":"Bharani is a designer\/developer from New Delhi, India. He is currently working on Resumonk.com - an online resume builder that helps you create a professional and beautiful resume in minutes. Also check out his side project - Quotescube.com - your daily dose of quotes.","sameAs":["https:\/\/www.hongkiat.com\/blog\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/bharanim\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2wf","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/204"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=9687"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9687\/revisions"}],"predecessor-version":[{"id":73501,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9687\/revisions\/73501"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=9687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=9687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=9687"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=9687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}