検索入力を左に拡張したい

Question

検索ボックスを左側に拡張しようとしましたが、どういうわけか幅を占めて右側に拡張されてしまいます。左マージンを与えてみましたが、まだ機能しません。

ここでは右に展開していますが、左にも展開したいです。左パディングを追加しようとしましたが、ボックスの外側ではなく内側に影響を受けます。

.検索クリック {
  境界線: 1px 実線 #ccc;
  概要: なし。
  背景サイズ: 22px;
  背景位置: 13px;
  境界半径: 100px;
  幅: 363ピクセル;
  高さ: 40ピクセル;
  パディング: 21px;
  トランジション: すべて 0.5 秒。
  マージントップ: 54px;
  テキストオーバーフロー: 省略記号;
  位置: 相対的;
  オーバーフロー: 非表示;
  //マージン左: -410px;
}

.search-クリック:フォーカス {
  幅: 800ピクセル;
  パディング左: 20px;
}

.search-クリック入力 {
  背景: 透明;
  境界線: 1px 実線 #ccc;
  概要: なし。
  位置: 絶対;
  幅: 300ピクセル;
  高さ: 50ピクセル;
  左: 0%;
  パディング: 10px;
}

<input type="text" class="search-click" placeholder="港、国、国際コードポートを検索" />

Answer 1

右から展開したい場合は、text-align:end;を.search-clickに追加するだけです。

Answer 2

左側の幅のトランジションについて、入力の位置を右側に変更しました。 position:absolute と right:0;top:0 を変更しました。

.検索クリック {
  境界線: 1px 実線 #ccc;
  概要: なし。
  背景サイズ: 22px;
  背景位置: 13px;
  境界半径: 100px;
  幅: 100ピクセル;
  パディング: 21px;
  トランジション: すべて 0.5 秒。
  テキストオーバーフロー: 省略記号;
  位置: 相対的;
  オーバーフロー: 非表示;
  テキスト整列: 左;
  位置: 絶対;
  右: 0;
  トップ: 0;
  マージン: 1em;
}

.search-クリック:フォーカス {
  幅: 400ピクセル;
  パディング左: 20px;
}