Ingin mengembangkan input carian kiri

Question

Saya cuba mengembangkan kotak carian ke kiri tetapi entah bagaimana ia mengambil lebar dan mengembang ke kanan. Saya cuba memberikan margin kiri tetapi masih tidak berkesan.

Di sini ia mengembang ke kanan, tetapi saya mahu ia mengembang ke kiri. Saya cuba menambah padding kiri tetapi ia terjejas di dalam kotak dan bukannya di luarnya.

.search-click {
  border: 1px solid #ccc;
  outline: none;
  background-size: 22px;
  background-position: 13px;
  border-radius: 100px;
  width: 363px;
  height: 40px;
  padding: 21px;
  transition: all 0.5s;
  margin-top: 54px;
  text-overflow: ellipsis;
  position: relative;
  overflow: hidden;
  //margin-left: -410px;
}

.search-click:focus {
  width: 800px;
  padding-left: 20px;
}

.search-click input {
  background: transparent;
  border: 1px solid #ccc;
  outline: none;
  position: absolute;
  width: 300px;
  height: 50px;
  left: 0%;
  padding: 10px;
}

<input type="text" class="search-click" placeholder="Search ports, countries, international code port" />

Answer 1

Kalau nak kembangkan dari kanan, cuma .search-click中添加text-align: end;.

Answer 2

Untuk peralihan lebar di sebelah kiri, saya telah menukar kedudukan input ke kanan. Berubah position:absolute 和 right:0;顶部：0.

.search-click {
  border: 1px solid #ccc;
  outline: none;
  background-size: 22px;
  background-position: 13px;
  border-radius: 100px;
  width: 100px;
  padding: 21px;
  transition: all 0.5s;
  text-overflow: ellipsis;
  position: relative;
  overflow: hidden;
  text-align: left;
  position: absolute;
  right: 0;
  top: 0;
  margin: 1em;
}

.search-click:focus {
  width: 400px;
  padding-left: 20px;
}