検索ボックスを再配置/フロートする方法

私は親切に私を助けてください、私はそれが（検索ボックス）が中心に置くときにGoogleのホームページに似た検索ボックスを設計しようとしていますフォーカスを当てると、テキストボックスは左上に移動します。私は検索ボックスのサイズを変更することができましたが、私はそれを望みどおりに再配置することはできません。検索ボックスを再配置/フロートする方法

<style> 
 

 
    input[type=text] { 
 
    width: 450px; 
 
    } 
 
    
 
    input[type=text]:focus { 
 
    width: 130px; 
 
    box-sizing: border-box; 
 
    border: 2px solid #ccc; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    background-image: url('searchicon.png'); 
 
    background-position: 10px 10px; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 40px; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
    } 
 
</style> 
 

 

 
<form id="form1" action="/search.php" method='GET' style="padding: 20px"> 
 

 
    <center> 
 
    <h1>Huzzle</h1> 
 
    <p> 
 
     <input name="search" id="search" type="text" class="footer1" size='50' placeholder=" Search for service...."></p> 
 
    <p>&nbsp;</p> 
 
    </center> 
 

 
    <body> 
 
    <p class="footer1"> 
 
     <center> 
 
     <input name='submit' type='submit' class="md-trigger md-setperspective search" value='Search'> 
 
     </center> 
 
    </p> 
 
</form> 
 
</body>

出典

2017-03-01 Iyke Uche

質問を編集して既存の（関連する）コードを表示してください。 – nnnnnn

詳しい説明を追加することをおすすめします。また、現在のソリューションを提供してください。 –

最近の編集では何の助けもありません –

入力の位置を変更するためにposition属性を使用します。

transitionアニメーションでwidthの代わりにallを使用します。それ以外の場合は、位置が変わるとアニメーション化されません。

以下は、関連するスタイルのみが埋め込まれたコードの簡略化されたバージョンです。もちろん

input[type=text] { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
} 
 

 
input[type=text]:focus { 
 
    top: 10%; 
 
    left: 10%; 
 
}

<input name="search" type="text" placeholder="Search for service....">

、あなたはあなたの正確な要件に合わせてtopとleft設定を編集したいと思います。

出典

2017-03-01 03:02:15

検索ボックスを再配置/フロートする方法

答えて

関連する問題