Möchten Sie die Sucheingabe nach links erweitern?

Question

Ich habe versucht, das Suchfeld nach links zu erweitern, aber irgendwie nimmt es die Breite ein und wird nach rechts erweitert. Ich habe versucht, den linken Rand anzugeben, aber es funktioniert immer noch nicht.

Hier wird es nach rechts erweitert, aber ich möchte, dass es nach links erweitert wird. Ich habe versucht, die linke Polsterung hinzuzufügen, aber sie wird innerhalb der Box und nicht außerhalb davon beeinflusst.

.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

如果你想从右边展开，只需在.search-click中添加text-align: end;即可。

Answer 2

对于左侧的宽度过渡，我已将输入的位置更改为右侧。更改了 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;
}