7 Kinds of pure CSS3 search box UI Design effect

Brief tutorials

This is a search box UI design effect made with CSS3. These search boxes in the design of simple code, design style with a flat style dominated, the effect of fashion generous.

How to use

HTML structure

The HTML structure of all search boxes is to place a single input and a Submit button in a form form.

<form>  <input type= "text" placeholder= "search starting from here ..." >  <button type= "Submit" ></button ></form>

CSS Styles

The various search box CSS code is very simple, such as the first effect of the search box, through a simple positioning can be done.

. d1 {background: #A3D0C3;}. D1 input {  width:100%;  height:42px;  padding-left:10px;  border:2px solid #7BA7AB;  border-radius:5px;  Outline:none;  Background: #F9F0DA;  Color: #9E9C9C;}. D1 button {  position:absolute;   top:0;  right:0px;  width:42px;  height:42px;  Border:none;  Background: #7BA7AB;  border-radius:0 5px 5px 0;  Cursor:pointer;}. D1 Button:before {  content: "\f002";  Font-family:fontawesome;  font-size:16px;  Color: #F9F0DA;}

Please refer to the download file for the implementation code of the search box for various other effects.

The above is 7 kinds of pure CSS3 search box UI design effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

