Search Box with Suggestions Dropdown
rounded CSS3 search box with fancy search suggestions. It consists of a form element having two children namely input (for the main search field) and ul.results (for the search suggestions dropdown). The results container is initially hidden by setting its display property to none. When the search field is clicked (focused), the results get visible by setting its display property to block.MORE / INFO
Subtle CSS3 Menu With Stretchy Searchbox
So this is another CSS experiment I did a while ago, I tried to create the same search box feature as on apple.com that stretches and manipulates widths of the menu. But I wanted to use only CSS. It falls back well in older browsers, Just no transitions are supported. Only image used is for the search icon – too lazy to do the CSS for it
MORE / INFO
CSS3 Form Pack (Premium)
CSS3 Form Pack features a large collection of form styles that are used regularly in websites. You get Search Forms, Login Forms, Contact Forms and General Form styles. Further all these forms are available in Dark and Light coloured versions, so you get a total of 224 form styles! The login, contact and general forms also have focus and validation error styles defined in the css.MORE / INFO DEMO
Super Cool Search Input Bar Using CSS3 and JS
Learn how to make a super cool search input form for your website with CSS3 and jQuery. In this codecast, you’ll see the use of labels as the input replacements for better styling and customization, and then some nice styling for the whole search box.MORE / INFO
Pulsating CSS3 Input Search Box
From some guest – Input search box with borders and shadows throbbing like pulses.MORE / INFO
Minimalistic Search Box
MORE / INFO DEMO
Pure CSS Search Box
If you are blogging, your blog is not complete without a search box. A search bar allows visitors to easily search content on your blog, and is certainly necessary. In this tutorial, I will teach you how to make a custom search bar for your site with pure CSS.MORE / INFO DEMO
Search Bar Animation
MORE / INFO DEMO
Rocking and Rolling Rounded Menu with jQuery
In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content.MORE / INFO DEMO
Google Powered Site Search with jQuery
By far one of the most requested features by Tutorialzine’s readers, is building a site-wide search. One way to do it, is to build it yourself from the ground up. That is, to use a server-side language like PHP and run search queries on your database, displaying the results to the user.MORE / INFO DEMO
Create beautiful form fields using CSS and images
Web Designers or developers care more for site design, colors, arrangement of the form elements, User Interface etc. rather than designing a cool, pleasant and great looking forms as they give designing form elements as a lowest priority.MORE / INFO DEMO
Stylish CSS3 Search Box
A search box is probably one of the most common UI elements around, and I think there is no need to explain its purpose anymore. Whether it’s about a website or a web application, to increase user experience for it, you may want to add a stylish search box.MORE / INFO DEMO
“Loooong” the search bar
This search box has been named “Loooong The Search Bar” because, it can expand by itself when you click on the search input area. This animation is created only using CSS3 and not using any scripting languages like jQuery or Moo-Tools. Though, you don’t find any tutorial explaining each bit of the code written, but you find some demo and the full functional code in jsfiddle from the below demo links.MORE / INFO DEMO DEMO 2
A simple CSS based usability tip for search buttons
This is a small tip to improve the usability of search fields. I realized the need of this while working on a recent project and thought it was good enough to share with my readers
Do you have the habit of hitting the search button multiple times even before it loads the search results? Well… I used to do that and so do many other users. Clicking the search button multiple times results in additional server requests and slows down the page’s loading time.
MORE / INFO DEMO
Expandable Mobile Search Form
Previously I wrote a tutorial on mobile navigation, today I’m going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs. This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a compact search form.MORE / INFO DEMO
Modern Search Fields PSD
Psd Freebie is the Modern Search Field PSD fully layered for you to edit/customize.9 Alternate colours, Grey, Red, Black, Green, Turqoise, Pink, Blue, Orange and Yellow.
MORE / INFO DEMO
Pretty Little Search Fields (PSD)
Almost every site could benefit from a search function and yours is no different. Do your users a favour and put together a search form, I promise they’ll love you more for it.MORE / INFO DEMO
Search Forms (PSD)
Need a search form for your website? Here are a couple of free ones, released as a FREE PSD, with both white and black backgrounds. And guess what? All elements are vector shaped. Enjoy!MORE / INFO DOWNLOAD
SearchBox (Premium)
SearchBox is a jQuery plugin that allows you to have reach search controls with filters on your pages (similar to GMail and Google Docs).MORE / INFO DEMO
jQuery Plugin for On-demand Search Box: SeacrhMeme
nother contribution towards simplicity of design is today’s freebie which is a free jQuery plugin for on-demand search box. We call it SearchMeme – the idea is to provide a small search button that can be placed anywhere on the website (you may want to put it in your website header). Clicking on search button expands it to show a text box where you can type your search terms.MORE / INFO DEMO (LIGHT) DEMO (DARK)
jQuery and CSS3 “Next Level” animation Search Form
Based on the picture above, the HTML element will consists of 4 elements, a div for elements wrapper, an input text, an input button for search button and an image search. All of them will be stacked each other where the div wrapper is at the very bottom of the stack and image search at the very top.MORE / INFO DEMO
CSS3 Search Form
A Search Form design made by using only CSS3 (except the icon). As you can see it comes in two versions – Light and Dark. The jsfiddle links to the two versions are given below. They are part of a collection of CSS3 forms that I made for Codecanyon. Check them out and let me know what you think.MORE / INFO DEMO (LIGHT) DEMO (DARK)
Clean Search Form, CSS3/jQuery + PSD
The search form is a very important part of a website allowing users to find quickly the content they are searching for. A well designed search form makes a website look professional and modern. So today’s web design resource is a clean search form. It’s available in the coded version, ready to use, and in the PSD version for changing the colors and effects as you like.MORE / INFO DEMO
5 Styles Fluid Search Box/Bar
Most websites come with a search box where the reader wants to look for certain information straight away, rather than simply browsing from link to link. As a must-have element, this feature also improves surfing experience. So today, i’ll share the fluid search box that have been placed in this blog, and another 5 extra styles.MORE / INFO DEMO
CSS Custom Search Field or Textfield
Tired of those normal old text field boxes? Well, we are going to create our own custom text field. You can use it on a form or for your search field on your blog. We will start out by simply using CSS to customize the color of the text field’s background and border. It’s simple, but it can make a big difference and help your search field or form fit in with the design of your site.MORE / INFO DEMO
Design a beautiful CSS3 search form
One of the elements most frequently used by websites is probably the search box.If you want to improve user experience in a simple way, and make it easy to search and find content for your users, then you have to add a search form on your website.
So, today we’re going to cover how to style a search form using the most exciting CSS3 features.
MORE / INFO DEMO
Tabbed search bar using CSS and Javascript
Some lines of JavaScript code can help you to add nice effects to improve some features of your websites.This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set “active” the selected tab and changes the value of an hidden input element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos…).
MORE / INFO DEMO
Styling Default WordPress Search Forms
Let’s look at four examples of visual modifications to the default WordPress and Thesis search input areas. We’ll work with a CSS-only version, a search form with a visible input button, search with a visible image-based submit button, and a full CSS background image replacement for the entire search form.MORE / INFO DEMO
How to create a cool and usable CSS3 search box
In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr’s feature detection.MORE / INFO DEMO
Stylish Search Box
Search Box is a essential item in any web site, and a stylish and workable search box can give an extra touch-up to your site. So in this tutorial I will like to show you how we can create a stylish search box simply by applying some little css tricks with html. You can simply apply it on your website to enhance the look and feel of the site.MORE / INFO DEMO
Designing Search Boxes with HTML5 and CSS3
Here, with the help of three simple examples, allow me to show how to code search boxes with HTML & CSS and how to spice things up with a bit of Javascript.The example initially designed for this tutorial was too difficult for most people, so I have decided to start you off with a simple example to start off with. They get more and more complicated as you read along.
MORE / INFO DEMO
Create a Search Form with CSS3 and jQuery
Most websites nowadays have a search form somewhere. I’m pretty sure I don’t need to explain why it’s a good idea to have a ‘search’ functionality built into a website and most Content Management Systems already come with the functionality built in. Usually the search area is in an easy to see/find place and it’s because of this reason it’s a good idea for it to look good – Or at least consistent with the rest of the website.MORE / INFO DEMO
Create a CSS3 Search Form
A site’s search form is a vital tool for visitors to quickly find exactly what they want. Since it is such a useful tool, it should not only stand out on your site in location, but also by appearance. Thanks to CSS3, creating a slick search form is easier than ever.MORE / INFO DEMO
Style Your Websites Search Field with JSCSS
Continuing to provide unobtrusive solutions, CSSG is happy to present SearchField. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup.MORE / INFO DEMO
Cool Search Box with New Google Style
Google has updated their appearance, including their search box. I think this Search Box is very nice with some. So better for us to try create Cool Search Box with New Google Style. Below is the difference of the search box.MORE / INFO DEMO
CSS3 Search Box Inspired by Apple
Today’s tutorial is on creating Apple-inspired search box or search field using CSS3 alone. The search field expands slowly when focused/clicked. This animation effect achieved purely using CSS3 transition property. Also, we have used other CSS3 properties such as border-radius, box-shadow and text-shadow to create cool effects.MORE / INFO DEMO
Grooveshark Search with CSS3
I am a huge fan of the Grooveshark interface. Every time I look at the site I start to dissect the UI and turn it into code in my head. I wanted to see if I could create the search box only using HTML and CSS. Sadly there is one image and it’s the search icon in the button. I recently read a tutorial that shows you how to create a custom font and use the font-face property for icons, but they didn’t have the search icon I needed.MORE / INFO DEMO
Beautiful CSS3 Search Form
Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.MORE / INFO DEMO
Some CSS styles for your search box II
In this Post you’ll find a set of css stylesheets for your search box. We create this stylesheets months ago as a hobby, and we think that it can be useful for some of you, and if isn’t, just watch it and leave a comment to improve this.MORE / INFO DEMO
How to Create a Fancy Search Box Using CSS
Almost every website have a search box that facilitate the visitors to explore the site and find what they require easily. As search boxes are important part of the best, they must look beautiful and attractive. Today we discussing how to create a fancy search box using CSS.MORE / INFO DEMO
Search Box CSS with background searchbox image
MORE / INFO DEMO
OS X style searchbox
The OS X search box is an integral part of the OS X UI, and can be seen in a wide range of Macintosh software. It has an magnifying glass icon on the left of the input field, which serves as a pulldown for options/recent search terms. There is an optional placeholder (“Google” in the Safari Google search box). If there is user input in the textfield, a ‘clear’ button appears to the right of the text.The OS X WebCore allows developers access to OS X-style search boxes in Safari, using proprietary HTML attributes.
MORE / INFO DEMO
Styled search box with CSS and images
Almost every site have a search box, but sometimes the search box isn’t attractive, or it’s just a simple search box, and users doesn’t even see it. In this tutorial I’m gonna show you how to make a nice search box using CSS and images.MORE / INFO DEMO
WebKit HTML5 Search Inputs
One of the new types of inputs in HTML5 is search.MORE / INFO DEMO
Create a Fancy Search Box using CSS
Nowadays, most websites come with a search box to improve surfing experience. To make your website looks good, beside having a nice looking theme, you would need a fancy search box to replace the classic ones.MORE / INFO DEMO
Creating “Next Level” Search Form Using jQuery & CSS3
Lately we found ton of new style search form crafted beautifully using CSS3 and JavaScript.Apple’s for example, widen the input field when it receive focus from user.
The question is “how far we can go for styling search form?”, in this tutorial we are going to move search form to the next level using jQuery & CSS3.
MORE / INFO DEMO
