動画検索フォーム左に展開

Question

私のボックスは右に拡大していますが、左に拡大するにはどうしたらいいですか？

input[type=text] { 
 
     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; 
 
    } 
 
    
 
    input[type=text]:focus { 
 
     width: 100%; 
 
    }

 
 
<form> 
 
     <input type="text" name="search" placeholder="Search.."> 
 
    </form>

Answer 1

ただ、そのコンテナ要素の右に揃えます。 display属性をblockに変更し、左右のマージンを0とに設定するか、インライン要素として保持し、text-align: rightをコンテナブロックに適用します。

input[type=text] { 
 
    display:block; 
 
    margin: 0 0 0 auto; 
 
    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; 
 
} 
 
input[type=text]:focus { 
 
    width: 100%; 
 
}

<form> 
 
    <input type="text" name="search" placeholder="Search.."> 
 
</form>