Create a beautiful search box with css-CSS Tutorial-php.cn

Create a beautiful search box with css

小云云

Release： 2017-11-29 11:20:34

Original

7044 people have browsed it

When doing website development, we definitely need one of the most basic functions, which is the search box. Then the search box style can also make a website look more beautiful and classy. Now we will teach you how to make the search box beautiful.

Rendering:
Create a beautiful search box with css

There are two ways to achieve this effect: one is to process a background as a whole and locate the search box in the form of a transparent gif, or cut Separately, this method loads quickly and is more flexible.
Pictures used in the article

Create a beautiful search box with css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS美化的漂亮搜索框</title>  
<style type="text/css">  
body{  font: normal 100% &#39;Arial&#39;,&#39;Helvetica&#39;,&#39;Verdana&#39;,sans-serif;  color: #333;  }  
p {  padding: 12px 0;  margin: 0;  font-size: .8em;  line-height: 1.5;  }  
form {  margin: 0;  }  #search_box 
{  width: 201px;  height: 31px;  background: url(http://files.jb51.net/demoimg/200912/Create a beautiful search box with css);  }  #search_box #s 
{  float: left;  padding: 0;  margin: 6px 0 0 6px;  border: 0;  width: 159px;  background: none;  font-size: .8em;  }  
#search_box #go {  float: right;  margin: 3px 4px 0 0;  }  </style>  </head>  <body>  <div id="search_box"> 
 <form id="search_form" method="post" action="#">  <input type="text" id="s" value="Search" /> 
  <input type="image" src="http://files.jb51.net/demoimg/200912/Create a beautiful search box with css" width="27" height="24" id="go" alt="Search" title="Search" /> 
   </form> 
    </div> 
     </body> 
      </html>

Copy after login

Tips: You can modify part of the code first and then run it

The above is what we use The search box implemented by css is simple and beautiful. Of course, you can follow the above method to create a search box you like.

Related recommendations:

How to use Js to implement the Baidu search box prompt function

Pure CSS3 implementation of the search box function example display

Share 8 CSS3 search boxes

The above is the detailed content of Create a beautiful search box with css. For more information, please follow other related articles on the PHP Chinese website!