过渡输入宽度

Question

我有输入搜索字段.当我点击它时,我需要它从右到左变得更宽,表现平滑过渡,即输入位于页面的右侧,当我点击它时,它应该以一定数量的像素向左伸展并变为更宽的.

这是我的css:

#header #search input {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 178px;
height: 21px;
border: 1px solid #CCCCCC;
border-radius: 6px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;

}
#header #search input:focus {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;

你可以帮我实现吗？

Answer 1

input[type="search"] {
background: #FFF;
padding: 1px 1px 1px 5px;
    position: relative; top: 0; left: 0;
width: 178px;
height: 21px;
    outline: none;
border: 1px solid #CCCCCC;
border-radius: 6px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;

}
input[type="search"]:focus {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;
  top: 0;
  right: 100%;    
}  

<div style="text-align:right;">
<input type="search" id="search" />
</div>