添加图标以输入文本作为其中的一部分

Question

我正在使用bootstrap 2.3.2，而且我的表单中包含input text。 在the input text的右侧，我有一个图标。

这是input text的

<div class="right-inner-addon">
    <input type="text" placeholder="Recherche un article" class="search-query">
    <i class="fa fa-search"></i>
</div>

这就是它的风格：

.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 7px 12px;
    padding-left: 10px;
}

问题在于，当我输入一些长文本时，此文本是在search icon下写的：

我希望当我写一篇长篇文章不能写在search icon之下时，我该怎么做？

Answer 1

我使用了Bootstrap 2.3.2版本并使用下面的CSS代码将搜索图标放在右侧。

.right-inner-addon{position:relative;}
.right-inner-addon input {
    padding-right: 30px; 
    height:30px;
}
.right-inner-addon i {
    padding: 7px 12px;
    padding-left: 11px;
   position: absolute;
    top: 10px;
  right:0

}
.icon-search {
    background-position: -36px 3px;
}

，HTML代码看起来像这样。

<form class="navbar-form pull-left form-search">
  <div class="right-inner-addon">
  <input type="text" placeholder="Recherche un article" class="search-query">
  <i class="icon-search"></i>
</div>
</form>

这是工作演示。 http://refork.com/351.cod