Question

我有一个搜索栏，其中包含一些社交媒体按钮。我想使用CSS3 Transition属性让我在单击时更改宽度，但我也需要按钮移动。这就是我到目前为止所拥有的

#s
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

#s:focus {
width:110px;
}

.search input[type="text"], .widget_search input[type="text"] {
background-image: url(api/images/icons/search.png);
background-repeat: no-repeat;
background-position: 8px 50%;
padding-left: 25px;
width: 80%;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

#searchform #searchsubmit {
clear: both;
display: block;
margin: 10px 0;
}

文本字段改变宽度很好但重申一下，我想知道当我单击文本字段时是否可以更改文本字段旁边按钮的位置。

<div id="header-widget-area" class="widget-area" role="complementary">
    <div id="pc_info_widget_designfolio-4" class="widget pc_info_widget">
        <a class="sm-icon" target="_blank" href="http://www.facebook.com/TheRedBalloonToyStore">
        <img width="32" height="32" alt="Facebook" src="http://redballoontoystore.com/w/wp-content/themes/designfolio/images/facebook.png">
        </a>
        <a class="sm-icon" target="_blank" href="http://twitter.com/RBToyStore">
        <img width="32" height="32" alt="Twitter" src="http://redballoontoystore.com/w/wp-content/themes/designfolio/images/twitter.png">
        </a>
        <div class="search">
            <form id="searchform" action="http://redballoontoystore.com/w/" method="get" role="search">
                <span>
                <input id="s" type="text" name="s" size="10" value="" placeholder="Search…">
                <input id="searchsubmit" type="submit" value="Search">
                </span>
            </form>
        </div>
    </div>
</div>

Answer 1

因为你想要移动的元素响应于input在DOM中出现早期，这与CSS选择元素的方式相反（它只能选择元素<在DOM中的em>稍后，我实现这一点的唯一方法是将a元素（包含图像）的大小调整为父div宽度的48％;并将图像置于其父a元素中。

这样，当父级的宽度响应焦点而改变时，a的大小会增加，并且由于图像在这些a元素中居中，它们的位置也会发生变化。缺点是父div必须调整其宽度以响应子元素的焦点，唯一可行的方法是div是显示inline，{{1 （或浮动或绝对定位）。

我还稍微修改了您的过渡方法，供应商前缀应该在非供应商前缀版本之前（这样'最终版本'转换会覆盖供应商前缀版本）。无论如何，调整品味，我希望这对你有用：

inline-block

JS Fiddle demo

Answer 2

尝试#s:focus + button和#s:focus + button + button之类的内容。请记住，+选择器元素表示“下一个兄弟”。

有条件的CSS3 ......如果这甚至是它所谓的

2 个答案: