我自己简单做了一个，因为上传图片麻烦，所以图中的图片我直接用文字代替，弄个背景就ok，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="author" content="blog.anchen8.net">
<title>无标题 1</title>
<style>
*{
margin: 0;
padding: 0;
}
.search{
margin: 30px;
width: 210px;
height:35px;
border:1px solid silver ;
}
.search_key{
width: 150px;
height: 25px;
border: none;
margin-top: 5px;
margin-left: 5px;
}
.submit{
background:none;
margin-top: 5px;
width:40px;
height: 25px;
border: none;
/*这个添加背景图即可*/
}
</style>
</head>
<body>
<form action="" method="post">
<div class="search">
<input type="text" class="search_key" value="站内搜索" />
<input type="submit" class="submit" value="搜索">
</div>
</form>
</body>
</html>
效果如下：
温馨提示：答案为网友推荐，仅供参考
第1个回答 2015-03-30
<input type="text" class="aa" /><input type="button" value="search" />
.aa{width:100px; height:20px; boder:solid 1px #f00;}//定义搜索框的大小高度以及边框颜色。
思路是：
放大镜图标用个img写进来或者用其它标签用CSS做背景也可以；
下拉导航这种效果系统的Select下拉是最容易想到的，但是别想着用它做，，原因很简单，做不到的，，这个必须借助JS辅助来解决！本回答被网友采纳
.aa{width:100px; height:20px; boder:solid 1px #f00;}//定义搜索框的大小高度以及边框颜色。
思路是：
放大镜图标用个img写进来或者用其它标签用CSS做背景也可以；
下拉导航这种效果系统的Select下拉是最容易想到的，但是别想着用它做，，原因很简单，做不到的，，这个必须借助JS辅助来解决！本回答被网友采纳
第2个回答 2014-03-11
<form>
<input type="text" name="name" value="站内搜索" />
<input type="submit" value="提交" />
</form>
大体上就是这样 他用css设置了我提交那个按钮的背景图片本回答被网友采纳
<input type="text" name="name" value="站内搜索" />
<input type="submit" value="提交" />
</form>
大体上就是这样 他用css设置了我提交那个按钮的背景图片本回答被网友采纳
相似回答