"Go" How to create a new style CSS3 search box

Online Demo

The search box is probably one of the most common UI elements in Web development, and I don't think it's necessary to describe how to use it. Whether it's a Web site or a web app that adds it to enhance the user experience, do you also want to design a chic search box?

In today's article, you'll learn how to use pseudo-elements to create an awesome CSS3 search box. Of course you can also download the source code or view the online demo before you start the introduction.

HTML Examples:

As you can see next, the markers are very small and easy to understand:

<form class= "CF form-wrapper" >

<input type= "text" placeholder= "Search here ..." required>

<button type= "Submit" >Search</button>

</form>

You may have noticed the special properties of HTML5, like placeholder and required, as follows:

. Placeholder-Basically, the function of this property is to display the information of a field in the text box before the text box has the focus, until the field information is hidden after the focus is obtained.

. Required-This property illustrates that the current element is a required attribute in a form submission.

HTML5 also brought us a new type attribute: type= "search".

Tip: HTML elements like IMG and input have no content, so pseudo-elements like before do not render any arrows for our search box. My solution is to use the button type= "submit" element instead of the normal input type= "submit". In this way, we can use the ENTER key to submit the form.

CSS Examples

Next, you will see the necessary styles in the demo:

Clear floating

. Cf:before,. cf:after{

Content: "";

display:table;

}

. cf:after{

Clear:both;

}

. cf{

Zoom:1;

}

Form elements

Prefixed attributes like-moz,-box,-shadow are not included, I just want to keep the following code clean.

/* Form Wrapper styling */

. 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);

}

/* Form Text input */

. 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 extra button spacing for Mozilla Firefox */

border:0;

padding:0;

}

I hope you will enjoy this tutorial and look forward to your feedback. Thank you for reading!

Via Gbtags

Source: How to create a new style CSS3 search box

"Go" How to create a new style CSS3 search box