重叠文本字段内的字体真棒图标

Question

在如下所示的重叠中，如何防止标题和文本字段之间的大空间？

      <h3>Title</h3>
      <form name="mail_form" id="mail_form" method="POST" action="">
          <label for="sendto">
          <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a>
          <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
          </label>
      </form>

CSS：

.icon-link-mail { position:relative; left:485px;top:29px; padding: 8px 8px 7px 8px; z-index: 2 }

结果可以在此fiddle

中看到

感谢。

Answer 1

我个人只是使​​用伪元素，但是如果你想使用<i>图标，那么我们可以使用position:absolute代替position:relative来做得更好。添加position:relative只会移动图标，但会留下它本来会占用的空间。 position:absolute不会离开那个空间。

我们需要确保将父包含（标签）设置为position:relative，这样图标将完全相对于父页面而不是整个页面定位。

HTML

<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
  <label for="sendto">
    <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a>
    <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
 </label>
</form>

CSS

#mail_form label {position:relative;}
.icon-link-mail { position:absolute; z-index: 2; right:0;}

结果

小提琴

http://jsfiddle.net/Ay6Hw/4/

Answer 2

这是一个解决方案，可以使用简单的CSS和标准字体非常棒的语法，不需要unicode值等。

1. 创建一个<input>代码，后跟一个带有您需要的图标的标准<i>代码。

2. 将相对定位与更高层次的顺序（z-index）一起使用，并将图标移到输入字段的顶部和上方。

3. （可选）您可以通过标准JS使图标处于活动状态，也许可以提交数据。

请参阅下面的三个代码片段，了解HTML / CSS / JS。

或者在JSFiddle中也是如此： 示例：http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>

Answer 3

我发现最好的方法就是使用图像。这将是代码：

.search input {
padding-left: 17px;
background: #FFF url("../images/icon_search.png") left no-repeat;
}
.search input:focus {
background:#fff;
}

这也将删除焦点背景图像，为用户提供更好的整体体验。