ブートストラップアニメーションでクリック時の入力を水平方向に拡大しますか？

Question

私は、ブートストラップを使ってテキストエリアを垂直方向に拡張する例をいくつか見つけました。

アニメーションのクリックイベントで、この[..]からこの[........]へのテキスト入力を水平方向に展開したいと思います。

これを簡略化する何かがブートストラップにありますか、自分でロールバックする必要がありますか？

Answer 1

私はPrinzadi

<h1>Expandable Search Form</h1> 
<p>Pen by <a href="https://twitter.com/prinzadi">Prinzadi</a></p> 
<h3>Demo 1</h3> 
<form> 
    <input type="search" placeholder="Search"> 
</form> 

<h3>Demo 2</h3> 
<form id="demo-2"> 
    <input type="search" placeholder="Search"> 
</form> 

body { 
    background: #fff; 
    color: #666; 
    font: 90%/180% Arial, Helvetica, sans-serif; 
    width: 800px; 
    max-width: 96%; 
    margin: 0 auto; 
} 
a { 
    color: #69C; 
    text-decoration: none; 
} 
a:hover { 
    color: #F60; 
} 
h1 { 
    font: 1.7em; 
    line-height: 110%; 
    color: #000; 
} 
p { 
    margin: 0 0 20px; 
} 


input { 
    outline: none; 
} 
input[type=search] { 
    -webkit-appearance: textfield; 
    -webkit-box-sizing: content-box; 
    font-family: inherit; 
    font-size: 100%; 
} 
input::-webkit-search-decoration, 
input::-webkit-search-cancel-button { 
    display: none; 
} 


input[type=search] { 
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; 
    border: solid 1px #ccc; 
    padding: 9px 10px 9px 32px; 
    width: 55px; 

    -webkit-border-radius: 10em; 
    -moz-border-radius: 10em; 
    border-radius: 10em; 

    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    transition: all .5s; 
} 
input[type=search]:focus { 
    width: 130px; 
    background-color: #fff; 
    border-color: #66CC75; 

    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); 
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); 
    box-shadow: 0 0 5px rgba(109,207,246,.5); 
} 


input:-moz-placeholder { 
    color: #999; 
} 
input::-webkit-input-placeholder { 
    color: #999; 
} 

/* Demo 2 */ 
#demo-2 input[type=search] { 
    width: 15px; 
    padding-left: 10px; 
    color: transparent; 
    cursor: pointer; 
} 
#demo-2 input[type=search]:hover { 
    background-color: #fff; 
} 
#demo-2 input[type=search]:focus { 
    width: 130px; 
    padding-left: 32px; 
    color: #000; 
    background-color: #fff; 
    cursor: auto; 
} 
#demo-2 input:-moz-placeholder { 
    color: transparent; 
} 
#demo-2 input::-webkit-input-placeholder { 
    color: transparent; 
} 

という名前の人がこの demoから純粋なCSSを使用して終了