How Change Search Btn On Focus Input?

How change search btn on focus input? The initial state: What I want to get on focus of input. I need use only css, not js. How make it?

Solution 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;
}

forminput:focus + button {
    order: -1;
}

Solution 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: 0px10px;
}

input:focus {
  float: right;
}

form {
  width: fit-content;
}

<formaction=""><inputtype="text"placeholder="Search"><buttontype="submit">Search</button></form>