两种方法——在input输入框里放一个搜索小图标
假如只有一个输入的搜索条件，你还在用一个单独的“搜索”按钮(button)标签吗？那种设计现在使用的不多了，现在更多的是把搜索图标放在输入框内，这是一个时尚的UI设计方式。本文将通过3个实例，介绍如何在input输入框里放一个搜索小图标。
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>输入框小图标</title>
<style type="text/css">
.box01{
color: #434343;
position: relative;
margin: 20px 20px;
}
.box01 input{
-webkit-appearance: none;
-moz-appearance: none;
appearance:none ;
outline: 0;
width: 270px;
height: 30px;
border:0px solid #fff;
border-radius: 20px;
box-shadow:0 0 5px 2px rgba(0,0,0,0.1);
padding: 0 30px 0 15px;
}
.box01 label{
font-size: 16px;
z-index: 2;
position: absolute;
left: 109px;
top:15%;
color: #b2b2b2;
}
.icon{
display: inline-block;
height: 16px;
width: 16px;
background-image: url(search.png);
background-repeat: no-repeat;
position: absolute;
top: 24%;
left: 290px;
z-index: 2;
}
#tip02{
padding: 0 10px 0 35px;
background-image: url(search.png);
background-repeat: no-repeat;
background-position: 10px 7px;
}
#tip03{
width: 290px;
padding: 0 10px 0 15px;
background-image: url(search.png);
background-repeat: no-repeat;
background-position: 290px 7px;
}
</style>
</head>
<body>
<div class="box01">
<input type="text" id="tip" placeholder="代码改变世界">
<i class="icon"></i>
</div>
<div class="box01"><input type="text" id="tip02" placeholder="代码改变世界"></div>
<div class="box01"><input type="text" id="tip03" placeholder="代码改变世界"></div>
</body>
</html>
demodownload
代码解释
第一种方法是使用<i></i>标签，设置它对容器的相对位置：position，top，lef。
第二和第三种方法是把小图标当作input标签的背景图片，设置背景图片的位置：background-position。
本实例代码并不复杂，关键是弄明白CSS里的background-image(背景图片)属性，以及position、background-position等位置数字的含义。
本实例需要用到一个搜索小图片search.png，你也可以用base64字符串来代替。
您可能对以下文章也感兴趣
- 4个实例演示——美化表单input输入框CSS样式
- CSS表单输入框设计：点击放大输入框
- jQuery和CSS3实现有进度条的多步注册表单
- 纯CSS：点击输入框时，标签（占位符）浮动可见
- 纯css3实现漂亮的用户注册表单
- CSS3+jQuery实现登录表单与注册表单同页平滑切换
- 漂亮的注册和登录切换表单【html5和css3实现】
