Home >Web Front-end >CSS Tutorial >Create a beautiful search box with css
Create a beautiful search box with css
- 小云云Original
- 2017-11-29 11:20:347100browse
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: 
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
<!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% 'Arial','Helvetica','Verdana',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>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
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!