我有输入搜索字段。当我点击它时,我需要它变得更宽,执行从右到左的平滑过渡,即输入位于页面的右侧,当我点击它时,它应该向左拉伸(stretch)一些像素并变成更宽的。
这是我的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;
你能帮我实现吗?
最佳答案
input[type="search"] {
background: #FFF;
padding: .5rem 1rem;
position: relative;
top: 0;
left: 0;
width: 178px;
height: 40px;
outline: none;
border: 1px solid #CCCCCC;
border-radius: 6px;
transition: all .5s;
}
input[type="search"]:focus {
width: 300px;
top: 0;
right: 100%;
}
<div style="text-align:right;">
<input type="search" id="search" />
</div>
关于html - 过渡输入宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30289580/