2

横にソーシャルメディアボタンがいくつかある検索バーがあります。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>
4

2 に答える 2

1

CSS が要素を選択する方法 (DOM の後半でしか要素を選択できない) とは対照的に、フォーカスに応じて移動したい要素は DOM の前inputの方に表示されるため、これを実装できる唯一の方法はサイズを変更することでした。親の幅の 48% の (画像を含む) 要素。画像を親要素内の中央に配置します。adiva

このように、フォーカスに応じて親の幅が変化すると、 のサイズがa大きくなり、画像がそれらのa要素内の中央に配置されると、それらの位置も変化します。欠点は、子要素のフォーカスに応じて親 div の幅を調整する必要があることです。可能な唯一の方法は、divが display のinline場合inline-block(または、フローティングまたは絶対配置) です。

また、移行アプローチを少し修正しました。ベンダー接頭辞は、ベンダー接頭辞が付いていないバージョンよりも前にある必要があります（「最終リリース」移行がベンダー接頭辞付きバージョンを上書きするように）。とにかく、好みに合わせて調整してください。これが役に立つことを願っています。

#header-widget-area {
    border: 1px solid #000; /* to help visualise the space/size of the element */
    display: inline-block; /* to 'collapse' the element to the size of its children */
}

#s {
    width: 80px;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}

#s:focus {
    width: 110px;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}

a {
    display: inline-block;
    width: 48%;
    text-align: center;
}​

JS フィドルのデモ。

于 2012-08-14T22:40:09.877 に答える
0

#s:focus + buttonやのようなものを試してください#s:focus + button + button。+セレクター要素は「次の兄弟」を意味することに注意してください。

于 2012-08-14T22:08:13.233 に答える