Beautiful search form in css3. Designing a Beautiful CSS3 Search Form

I was criticized, they say, the layout sucks, but there are modern HTML5 and CSS3.

Of course, I understand, the latest standards are cool and all that. But the fact is that I, as a rule, make typesetting to order, and in most cases, complete identity in different browsers is important, which does not allow using the latest technologies. Therefore, I focus primarily on cross-browser compatibility and, out of habit, made up the search form “in the old way”.

In general, with this post I correct the situation (for the sake of those who were dissatisfied with the last article =) and offer my version of the layout of the same search form, but using HTML5 and CSS3 technologies.

An example of what happens as a result is possible.

What do we lose when laying out this form using HTML5 and CSS3

1. IE9 and below - will not see the default text (placeholder attribute).
2. IE8 and below - will not see rounded corners and inner shadows.
3. IE7 - you have to specify a different form width for it, because it does not support the box-sizing property.
4. IE6 - but we don’t take it into account at all =)

In other modern browsers, everything is fine. I believe that the above shortcomings are not critical, so for my site I would boldly use a form designed using the latest technologies.

Search Form HTML Code

It looks like this:

Compared to the form from the previous article, the following changes have been made in accordance with HTML5 technology:

1. The type="text" attribute has been replaced with type="search" .
2. Inline script replaced with placeholder="(!LANG:search" .!}

CSS code

Here are all the necessary styles with comments:

Search ( /* set the required width of the form depending on the design ** the form stretches without problems */ width: 35%; /* the submit button will be positioned absolutely, ** so this property is needed */ position: relative; ) .search input ( /* disable borders on inputs */ border: none; ) /* styles for the input field */ .search .input ( /* stretch the input field to the full width of the form */ width: 100%; /* due to the top (8px) and bottom (9px) padding ** adjust the height of the form ** padding on the right (37px) more than the left one, ** because the submit button will be placed there */ padding: 8px 37px 9px 15px; /* to make the width of the input field (100%) included inline padding */ -moz-box-sizing: border-box; box-sizing: border-box; /* add inline shadows */ box-shadow: inset 0 0 5px rgba(0,0 ,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3); /* round corners */ border-radius: 20px; background: #EEE; font: 13px Tahoma, Arial, sans-serif; color : #555; outline: none; ) /* change the appearance of the input field on focus */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4 ); background: #E8E8E8; color: #333; ) /* style the submit button */ .search .submit ( /* position the button absolutely from the right edge of the form */ position: absolute; top: 0; right: 0; width: 37px; /* stretch the button to the full height of the form */ height: 100%; cursor: pointer; background: url(https://lh4.googleusercontent.com/-b-5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go. png) 50% no-repeat; /* add transparency to the submit button */ opacity: 0.5; ) /* change the transparency of the submit button on hover */ .search .submit:hover ( opacity: 0.8; ) /* this property is needed for so that browsers ** Chrome and Safari can style inputs */ input ( -webkit-appearance: none; )

And styles for IE below version 9:

/* set separate styles for IE below version 9 */ *+html .search ( /* for IE7 adjust the width for other browsers and add a right ** padding so the submit button fits in place */ width: 28 %; padding: 0 52px 0 0; ) .search .input ( border: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input:focus ( border: 1px solid #CFCFCF; border-top: 1px solid #999; ) .search .submit ( filter: alpha(opacity=50); ) .search .submit:hover ( filter: alpha(opacity=80); )

P.S. Thanks to the critics for the comments on the previous article! Thanks to you, I have some new layout moments in my head.

Two options for search forms that save space on your site. When clicked, the form expands for text entry. Used only CSS3.

HTML

Simple form with html5 tag:

css

First, let's restart the styles for webkit browsers that tend to add to search engines input tag frame, close icon. Therefore, we will remove all this superfluous:

Input ( outline: none; ) input ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration , input::-webkit-search-cancel-button ( display: none; /* remove the search and cancel icon */ )

Let's create a search form:

We will not dwell on all the properties, just note that the width of the search input first has a value 55px, and will expand to 130px at the moment of focus :focus. Property transition allows you to animate this change in width. Used for glow box shadow:

Input ( background: #ededed url(search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz- border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; ) input:focus ( width: 130px; background-color: # fff; border-color: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); )

AT demo 2 input the search field is even more compact - only the icon will be displayed. Clicking on it will also change the width of the input field.

#demo-b input ( width: 18px; padding-left: 10px; color: transparent; cursor: pointer; ) #demo-b input:hover ( background-color: #fff; ) #demo-b input:focus ( width : 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; )

And the text is made transparent:

#demo-b input:-moz-placeholder ( color: transparent; ) #demo-b input::-webkit-input-placeholder ( color: transparent; )

The form works in all modern browsers Chrome, Firefox, safari, and IE8+.

One of the most used elements of any website is the search form. If you want to improve the usability of your site and make it much easier to find what you're looking for, then you should get serious about designing a search form.

So, today we want to tell you about designing a search form using CSS3 properties.

You've probably already found tutorials on designing a CSS3 search form in the past, but today we want to offer you a slightly different option - a search form with a 3D effect implemented using the box-shadow parameter.

markup

Below you can see the HTML code used to develop this form. Please note that our filler is developed using HTML5, and we have used all the necessary attributes.

At first, we wanted to use the type="search" introduced in HTML5, but then changed our minds due to incompatibility with many modern browsers. Now we need to add a few extra lines of CSS code to overwrite the original values.

Let's take a look at the minimal styles used to create a beautiful CSS3 search form:

Form-wrapper (
width: 450px
padding: 8px
margin: 100px auto;
overflow: hidden;
border-width: 1px;
border-style: solid
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

Form-wrapper #search(
width: 330px
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px "lucida sans", "trebuchet MS", "Tahoma";
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}

Form-wrapper #search:focus (
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}

Form-wrapper #search::-webkit-input-placeholder (
color: #999;
font-weight: normal
}

Form-wrapper #search:-moz-placeholder (
color: #999;
font-weight: normal
}

Form-wrapper #search:-ms-input-placeholder (
color: #999;
font-weight: normal
}

Form-wrapper #submit (
float:right;
border: 1px solid #00748f;
height: 42px;
width: 100px
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}

Form-wrapper #submit:hover,
.form-wrapper #submit:focus (
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}

Form-wrapper #submit:active (
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

Form-wrapper #submit::-moz-focus-inner (
border: 0;
}
Browser support

Below you can see some screenshots showing our search form. You should notice that it also works fine if the page is opened in an older version of the browser. I would also like to add that this CSS3 search form is completely ready to use.

Modern browsers Chrome, Firefox, Safari, Opera, IE10:

The good news is that IE10 also supports HTML5 filler.

Legacy versions of IE (6/7/8):

In conclusion

If you have read our previous articles, then you probably know that here we are developing working applications (with and without rollback versions) for all browsers. And this example is no exception.

In addition to using a CSS3 form to create a search block, you can easily adapt it to create an authorization form or a subscription form.

The article describes the features of the site search form layout, provides an example of semantic code markup, CSS3 design, plus a bit of jQuery magic at the end.

• markup

  Before the advent of HTML5, the search form was made into a regular text field, with the gradual arrival of a new version of the markup language into our lives, a special type of search field appeared for it. So in the HTML of a modern site, we might see something like this:

  Code result in FF, Opera, IE9:

  And a little differently in browsers based on the webkit engine (Chrome, Safari):

  Search box in webkit

  As you can see, when focus is added to the field, a highlight is added, and when you enter text, a clear button appears, when you click on it, the contents of the field are deleted, which is quite convenient in itself.

  Without CSS styling, our search form looks pretty simple so far, in this article we will try to do something like this:

  
  for example: search form layout

  Unless support for older browsers is planned, an empty non-semantic element

  can be replaced with pseudo-element:before .

  Features of the design of the search form

  Since I decided to use a lot of CSS3 properties, these miracles will not work in old Internet Explorer browsers, and in order to achieve cross-browser compatibility, you need to connect crutches, do something with pictures, etc.

  First of all, I would like to draw attention to some features, namely:

  • stylization in webkit browsers
  • placeholder styling

  Search form styles in Chrome, Safari browsers

  Let's add some style to the field with the .search class:

  Search ( background: #d8e6ef; border: 1px solid #000; )

  Screenshot result:

  Search in FF, Opera, Chrome and Safari browsers

  As usual in browsers, there is staggering and confusion, in Chrome the border somehow works strangely (margins appear, as if we are setting padding), Safari completely ignores the rules. But there is a solution in this situation, we add this rule to the CSS code:

  Search ( -webkit-appearance: none; )

  Now everything is fine in webkits, but they still differ in highlighting fields on default focus and a clear button. These elements, although often convenient, can sometimes spoil the design idea and need to be disabled. Removing the backlight is very simple:

  Search:focus ( outline: none; /* removed focus highlight */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow : inset 0 0 2px #000; box-shadow: inset 0 0 2px #000; /* added inner-shadow as an alternative for all browsers */ )

  It remains to get rid of the clear button. In fact, it can be easily styled by replacing a simple cross with some kind of background, positioned, etc., but in my example it will not be needed:

  /* rule only for element with class search */ .search::-webkit-search-cancel-button ( display: none; /* removed clear button */ ) /* or all fields with type search in document */ input ::-webkit-search-cancel-button ( display: none; )

  Formatting the placeholder text tooltip

  Unfortunately, with a text hint, everything is a little more complicated than it seems at first glance. Firstly, it doesn't work in IE9, not to mention older browsers, so JavaScript should be used in critical places where some text in the field is required initially. Secondly, placeholder does not lend itself well to design in Firefox, Chrome, Safari browsers and does not lend itself at all to Opera:

  :-moz-placeholder ( color: #304e62; /* changed color in FF */ ) ::-webkit-input-placeholder ( color: #304e62; /* changed color in webkit */ )

  Please note that these selectors will not work if they are listed separated by commas, each must start on a new line.

  I considered special moments at which difficulties could arise, the rest should not cause problems for a more or less experienced layout designer.

  jQuery scripts

  Finally, let's add some scripts to our form, namely:

  • let's cancel the request and display an error message when sending an empty field
  • when focusing on the field, add a small tooltip at the bottom

  It is very easy to implement all this with the power of jQ, I got the following code with comments:

  $(function() ( /* handle form submission */ $(".search-form").submit(function() ( var errVal = "empty request"; /* If field is empty or contains errVal value */ if( $(".search").val() == "" || $(".search").val() == errVal) ( /* add errVal value to field, change background color and */ $(" .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* return false - the form is not submitted */ return false; ); )); / * when field is focused */ $(".search").focus(function() ( /* set field value to empty, set background color to default */ $(this).val("").css((backgroundColor : "#d8e6ef")); /* show tooltip */ $(".notice").fadeIn(400); )); /* when focus is removed */ $(".search").blur(function( ) ( /* remove tooltip */ $(".notice").fadeOut(400); )); ));

  Of course, it is best to replace classes in the script with identifiers for faster script operation, and if other elements with the same classes appear in the document, they will not break the script.

  Results

  Thus, we designed and programmed the search form for the site, it works in the latest versions of Firefox, Chrome, Opera, Safari and IE9+. With a strong desire, you can make a more or less cross-browser version, starting at least with IE6.

  Checked

  • Internet Explorer 9+
  • Opera
  • Firefox
  • Chrome
  • safari

  Help the project

The search box is probably one of the most common user interface elements. When working on the level of interface usability, it is very common to want to add a stylish search field. In this tutorial, we will create such a popular element using pseudo-elements.

HTML markup

To prepare such a field, markup will be minimal.

This uses the special HTML5 placeholder and required attributes:

• placeholder- this attribute sets the output of text in the field before the field receives input focus, then the text is hidden.
• required- this attribute sets a mandatory condition for the presence of information in the input field before submitting the form.

HTML5 also has a new meaning for the type attribute: type="search" . But it's not well supported in browsers, so we won't be using it for now.

HTML elements like img and input have no content. Therefore, a pseudo-element like :before will not display any arrows for the button.

The solution to this problem in our case is to use button type="submit" instead of input type="submit" . So we keep the form using the ENTER key.

css

Here are the styles needed for our demo:

Cancel text wrapping

Cf:before, .cf:after( content:""; display:table; ) .cf:after( clear:both; ) .cf( zoom:1; )

Form elements

Browser prefixes are not shown in the lesson code for better clarity. You can see the full code in the source text.

/* Styling the form container */ .form-wrapper ( width: 450px; padding: 15px; margin: 150px auto 50px auto; background: #444; background: rgba(0,0,0,.2); border-radius : 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); ) /* Style the text input box */ .form-wrapper input ( width : 330px; height: 20px; padding: 10px 5px; float: left; font: bold 15px "lucida sans", "trebuchet MS", "Tahoma"; border: 0; background: #eee; border-radius: 3px 0 0 3px; ) .form-wrapper input:focus ( outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; ) .form-wrapper input::-webkit -input-placeholder ( color: #999; font-weight: normal; font-style: italic; ) .form-wrapper input:-moz-placeholder ( color: #999; font-weight: normal; font-style: italic ; ) .form-wrapper input:-ms-input-placeholder ( color: #999; font-weight: normal; font-style: italic; ) /* Form submit button */ .form-wrapper button ( overflow: visible; position: relative; float:right; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; color: #fff; text-transform: uppercase; background: #d83c3c; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0,0, .3); ) .form-wrapper button:hover( background: #e54040; ) .form-wrapper button:active, .form-wrapper button:focus( background: #c42f2f; outline: 0; ) .form-wrapper button:before ( / * left arrow */ content: ""; position: absolute; border-width: 8px 8px 8px 0; border-style: solid solid solid none; border-color: transparent #d83c3c transparent; top: 12px; left: -6px; ) .form-wrapper button:hover:before( border-right-color: #e54040; ) .form-wrapper button:focus:before, .form-wrapper button:active:before( border-right-color: #c42f2f; ) .form-wrapper button::-moz-focus-inner ( /* Remove the extra space next to the button in Mozilla Firefox */ border: 0; padding: 0; )