如何更改焦点输入上的搜索按钮？

Question

如何更改焦点输入时的搜索按钮？初始状态：

<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

这应该可以帮助您入门/一个解决方案，我使用了 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>

Answer 2

在表单上创建一个 flex 容器，并在按钮获得焦点时使用 order: -1 样式。这将允许按钮出现在输入之前，假设其他弹性项目设置为其初始订单值 0。

form {
    display: flex;
}

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