Question

我没有成功将我的图标字体放入我的搜索输入中。

我已尝试使用保证金，填充，但没有任何效果！

你能给我一些帮助吗？

问题的解答：

我的Html：

<li id="sb-search" style="float:right; list-style:none; height:20px; bottom:3px; ">
    <form id="search">
      <input name="q" type="text" size="40" placeholder="Pesquisar..." />
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
</li>

我的css：

#search {

    outline:none ;
    border:none ;

}

#search button[type="submit"] {

    width: 20px;
    background:none;
    cursor:pointer;
    height:20px;
}

button[type="submit"]>i:hover
{     
    color: #fff;

}   


button[type="submit"]>i
{
    background:none;
    color:#ccc;
    font-size:1.1em; 
}


#search input[type="text"] 
{
    border: 0 none;
    background: #141d22;
    text-indent: 0;
    width:110px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Answer 1

您无法将图像放入<input type='text'>元素中。

但是，您可以使用以下方法删除输入的边框：

input[type='text'] {
    background-color:transparent;
    border: 0px solid;
}

然后用div中的图标包装并重新设置样式。

示例代码：

以下是jsFiddle：http://jsfiddle.net/hxjY7/

以下是代码：

<style type="text/css">
    #textBoxWrapper{
        border: 1px solid black;
        width: 172px;
        height: 20px;
    }

    #textBox {
        background-color:transparent;
        border: 0px solid;
        width: 150px;
        height: 20px;
        float:left;
    }
    #icon{
        width: 20px;
        height: 20px;
        background-color: grey;
        float:left;
    }
</style>

<div id="textBoxWrapper">
<div id="icon"></div>
<input type="text" id="textBox" />
</div>

Answer 2

如果您尝试在输入字段内移动按钮，可以将按钮设置为绝对位置（以及搜索包装器为相对位置）：

http://jsfiddle.net/Tj7nJ/3/

#search {
    outline: none;
    border: none;
}

#search {
    position: relative;
    z-index: 1;
}

#search button[type="submit"] {
    width: 20px;
    background: none;
    cursor: pointer;
    height: 20px;
    z-index: 2;
    position: absolute;
    top: 3px;
    right: 10px;
}

button[type="submit"]>i:hover {
    color: #fff;
}

button[type="submit"]>i {
    background: none;
    color: #ccc;
    font-size: 1.1em;
}

#search input[type="text"] {
    border: 0 none;
    background: #141d22;
    text-indent: 0;
    width: 110px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Answer 3

我认为这就是你要做的。 jsFilddle

<强> HTML：

<form id="search" action="#" method="post">
    <fieldset>
        <input type="text" id="q" name="q" size="40" placeholder="Search..." />
        <button type="submit"><i class="fa fa-search"></i>
        </button>
    </fieldset>
</form>

<强> CSS：

form#search fieldset {
    position: relative;
    border: none;
}
form#search input[type='text'] {
    padding: 4px;
}
form#search button {
    position: absolute;
    top: 9px;
    left: 262px;
}

如何在HTML` <input />`标记内插入一个图标

3 个答案: