調整大小的文本輸入

Question

我使用bootstrap在我的網站，我不想創建像this。

我的html代碼：

<form class="navbar-form navbar-left" role="search"> 
    <div class="form-group"> 
    <input type="text" class="form-control search-input" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default"> 'Find'</button> 
</form> 

我怎麼能調整輸入？

Answer 1

在教程你指定的，css代碼是： 加入這個零件到你的html頁：DEMO HERE

<style stype='text/css'> 

input[type=text].search_form 
{ 
border: 1px solid #ccc; 
border-radius: 3px; 
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 
width:200px; 
min-height: 28px; 
padding: 4px 20px 4px 8px; 
font-size: 12px; 
-moz-transition: all .2s linear; 
-webkit-transition: all .2s linear; 
transition: all .2s linear; 
} 

input[type=text]:focus.search_form 
{ 
width: 400px; 
border-color: #51a7e8; 
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5); 
outline: none; 
} 

</style> 

<form class="navbar-form navbar-left" role="search"> 
    <div class="form-group"> 
    <input type="text" class="form-control search-input" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default"> 'Find'</button> 
</form> 

Answer 2

你可以不喜歡我做this JSFiddle

.form-control.search-input[type=text]:focus { 
width: 400px; 
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5); 
outline: none; 
-moz-transition: all .2s linear; 
-webkit-transition: all .2s linear; 
transition: all .2s linear; 
} 

希望這有助於

Answer 3

試試這個

.navbar .search-input[type=text]:focus { 
    width: 400px; 
    border-color: #51a7e8; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5); 
    outline: none; 
} 

Answer 4

你貼有你需要的代碼，此教程。你將要針對您的輸入，並添加您的過渡選擇：

.search-input { 
    -moz-transition: all .2s linear; 
    -webkit-transition: all .2s linear; 
    transition: all .2s linear; 
    width: 200px; 
} 

然後焦點設置新的寬度：

.search-input:focus { 
    width: 400px; 
} 

這裏是一個小提琴：http://jsfiddle.net/U5UZd/