Изменение размера ввода текста

Question

Я использую из бутстрапа на своем сайте, я не создаю что-то вроде 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 есть: Добавить эту страницу на страницу: 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/