[分享]css3左右图标固定

CSS3可以让我们实现很多美观实用的效果，其中之一就是左右图标固定。这种效果可以在一些网站的搜索栏、输入框等地方看到，下面就给大家介绍如何实现这种效果。/先定义输入框及两个图标的样式/ .input{...

CSS3可以让我们实现很多美观实用的效果，其中之一就是左右图标固定。这种效果可以在一些网站的搜索栏、输入框等地方看到，下面就给大家介绍如何实现这种效果。

/*先定义输入框及两个图标的样式*/
.input{
  position: relative;
}
.icon{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.left-icon{
  left: 10px;
}
.right-icon{
  right: 10px;
}

/*给输入框中左右图标赋值*/
<input class="input" type="text" placeholder="请输入内容">
<i class="icon left-icon"></i>
<i class="icon right-icon"></i> 

代码非常简单，首先我们将输入框的position设置为relative，这样在输入框中使用绝对定位的图标就会相对于它定位，接着分别定义左右图标的样式，其中top和transform: translateY(-50%)是为了让图标在垂直方向上居中，left和right则是为了让左右图标分别靠左和靠右。最后我们还需要在输入框中嵌套左右图标的元素，以便可以添加样式。

这样，当我们在CSS中实现好左右图标的样式之后，在HTML中就可以非常方便地使用它们了。左右图标固定的效果在一些企业网站中非常常见，如果你需要实现这种效果，就可以结合上面的代码进行实现。