How change search btn on focus input?

问题:

How change search btn on focus input? The initial state:

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

What I want to get on focus of input. I need use only css, not js.

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

How make it?

回答1:

Create a flex container on the form and style the button with order: -1 if it's focused. This will allow the button to appear before the input assuming other flex items are set to their initial order value of 0.

form {
    display: flex;
}

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

回答2:

This should get you started / one solution, I've used the float property, switching it from left to right on the :focus of the input. Hopefully this is roughly what you wanted, let me know if it wasn't.

---

Demo

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>