Question

我希望输入元素的样式位于github.com的左上角。当我单击输入Search or type a command时，输入的宽度会变大，然后它会回到这些元素之上。

在做了一些搜索之后，我找不到它的方法。这就是我尝试过的：jsfiddle

感谢您的帮助。

Answer 1

如果要添加类似的动画，则需要添加转场：

#input-text {
    position: relative;
    width: 200px;
    transition: width 100ms ease-in;
}

如果您想要菜单叠加效果，可以使用以下作为指示点：

Demo Fiddle

HTML

<div>
    <input type='text' />
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
</div>

CSS

div {
    position:relative;
}
input {
    position:absolute;
    width:300px;
    z-index:1;
    transition:200ms width ease-in;
}
input:focus {
    width:500px;
}
input:focus + ul{
    opacity:0;
}
ul {
    list-style:none;
    position:absolute;
    left:320px;
    z-index:0;
    opacity:1;
    transition:200ms opacity ease-out;
}
ul, li {
    margin:0;
    padding:0;
}
ul, li {
    display:inline-block;
    vertical-align:middle;
}

Answer 2

我之前尝试过这样做 - 特别是github搜索栏。

有很多关于如何做到的文章。我会从他们开始吗？

http://java.dzone.com/articles/recreate-github-search-box
http://www.paulund.co.uk/create-a-slide-out-search-box

Answer 3

你想要的是CSS过渡：http://css-tricks.com/almanac/properties/t/transition/

#input-text {
    position: relative;
    width: 200px;
    transition: width 0.5s;
}

http://jsfiddle.net/Qxa5N/5/

在聚焦时如何使输入宽度更大，在植物上方？

3 个答案:

Demo Fiddle