Twitter Bootstrap圖標擴展輸入框

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

您需要使用<span class="icon-plus-sign">在輸入框外採用「圖標加號」，然後使用絕對定位將此圖標放入輸入框。附：在精靈中保留圖標寬度。謝謝！！

Answer 2

看到這個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 3

最好的辦法是修改HTML像這樣：

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

與屬性給出焦點輸入上點擊事件的標籤。
span元素是圖標。

你可以在這裏看到一個例子（你必須調整CSS）： http://jsfiddle.net/ye0k18jj/42/

Answer 4

你需要做一些HTML和CSS的變化。你可以看小提琴並瞭解它的實施方式。 [http://jsfiddle.net/ye0k18jj/44/

.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; 
 
}

<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>

] 1