如何更改搜索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设置按钮样式。假设其他弹性项目的初始订单值设置为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>