Question

我有2个输入框，一旦点击就会展开。代码看起来像

<form class="search" method="post" action="">  
    <input class="icon-plus-sign" id="search-box-add" type="text">
    <input class="icon-minus-sign" id="search-box-del" type="text">
</form>

.search label{
    font-size:0.75em;
    font-weight:bold;
    color:#333;
    text-indent:-9999em;
    display:block;
    float:left;
}
.search input[type="text"]{
    text-indent:1px;
    padding:0 0 0 22px;
    width:0;
    height:22px;

    border:1px solid #ccc;
    color:#000;

    -webkit-transition:width 0.5s ease-in-out;
    -moz-transition:width 0.5s ease-in-out;
    cursor:pointer;
}
.search input[type="text"]:focus{
    width:200px;
    outline:none;
    cursor:text;
}

http://jsfiddle.net/ye0k18jj/40/

我遇到的问题是，

当框展开时，它会显示多个图标
我无法使图标变大

任何想法，

Answer 1

请参阅此fiddle，我希望这是您正在寻找的。

<form class="search" method="post" action="">  
    <label for="search-box-add" class="icon-plus-sign"></label>  
    <input id="search-box-add" type="text">   
    <label for="search-box-del" class="icon-minus-sign"></label>                   
    <input id="search-box-del" type="text">
</form>


.search label { position:absolute; margin:5px 0 0 5px; }

Answer 2

您需要使用<span class="icon-plus-sign">在输入框外部取“icon-plus-sign”，然后使用绝对定位将此图标放入输入框。附：在精灵中保持图标宽度。谢谢！

Answer 3

最好的方法是修改你的html：

<label for="search-box-add">
    <span class="icon-plus-sign"></span>
    <input id="search-box-add" type="text">
</label>

带有for属性的标签将焦点放在点击事件的输入上 span元素是图标。

你可以在这里看到一个例子（你必须调整CSS）： http://jsfiddle.net/ye0k18jj/42/

Answer 4

你需要做几个html和css更改。您可以查看小提琴并了解其实现方式。 [http://jsfiddle.net/ye0k18jj/44/

＆＃13;

.search label{
    font-size:0.75em;
    font-weight:bold;
    color:#333;
    text-indent:-9999em;
    display:block;
    float:left;
    width:15px;
    z-index:-1;
      margin-top: 4px;
}
.search input[type="text"]{
    float: left;
    margin-left: -15px;
    padding:0 0 0 30px;
    width:10px;
    height:22px;
    background: transparent;
    border:1px solid #ccc;
    color:#000;
   
    -webkit-transition:width 0.5s ease-in-out;
    -moz-transition:width 0.5s ease-in-out;
    cursor:pointer;
    float: left;
    margin-left: -15px;
    margin-right:10px;
}
.search input[type="text"]:focus{
    background: transparent;
    width:200px;
    outline:none;
    cursor:text;
}

＆＃13;

<form class="search" method="post" action="">  
<span>    <label class="icon-plus-sign"></label>
    <input  id="search-box-add" type="text">
    </span>
    <span>
    <label class="icon-plus-sign"></label>
    <input id="search-box-del" type="text">
        </span>
</form>

＆＃13;

] 1

Twitter Bootstrap图标扩展输入框

4 个答案: