使用自举动画在点击时水平扩展输入？

Question

我发现了一些使用bootstrap垂直扩展textarea的例子。

我想通过动画在点击事件上将这个[..]的文本输入水平展开到这个[........]。

是否有自举会简化这个或我必须推出自己的？

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

有人使用纯CSS从这个 demo