Как изменить поиск btn на фокус ввода?

Question

Как изменить поиск btn на фокус ввода?Исходное состояние:

<form action="">
  <input type="text" placeholder="Search">
  <button type="submit">Search</button>
</form>

Что я хочу получить в фокусе ввода.Мне нужно использовать только CSS, а не JS.

<form action="">
  <button type="submit">Search</button>
  <input type="text" placeholder="Search">
</form>

Как это сделать?

Answer 1

Создайте в форме гибкий контейнер и добавьте стиль к кнопке с order: -1, если она сфокусирована. Это позволит кнопке появиться до ввода, если предположить, что другим элементам flex присвоено начальное значение порядка 0.

form {
    display: flex;
}

form input:focus + button {
    order: -1;
}

Answer 2

Это должно помочь вам начать / одно решение, я использовал свойство float, переключая его слева направо на :focus входа.Надеюсь, это примерно то, что вы хотели, дайте мне знать, если это не так.

---

Демо

button, input {
  float: left;
  margin: 0px 10px;
}

input:focus {
  float: right;
}

form {
  width: fit-content;
}

<form action="">
  <input type="text" placeholder="Search">
  <button type="submit">Search</button>
</form>