Vous souhaitez étendre la saisie de recherche à gauche

Question

J'ai essayé d'agrandir le champ de recherche vers la gauche, mais d'une manière ou d'une autre, il prend de la largeur et s'étend vers la droite. J'ai essayé de donner une marge à gauche mais cela ne fonctionne toujours pas.

Ici, il s'étend vers la droite, mais je veux qu'il s'étende vers la gauche. J'ai essayé d'ajouter un remplissage gauche, mais il est affecté à l'intérieur de la boîte plutôt qu'à l'extérieur.

.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

Si vous souhaitez développer depuis la droite, juste .search-click中添加text-align: end;.

Answer 2

Pour la transition de largeur à gauche, j'ai changé la position de l'entrée vers la droite. Changé 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;
}