如何更改焦点输入上的搜索btn? [英] How change search btn on focus input?

问题描述

如何在焦点输入上更改搜索btn?初始状态:

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

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

我想重点关注输入的内容.我只需要使用css，而不是js.

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>

如何制作?

推荐答案

在表单上创建一个flex容器，并在按钮居中的情况下使用 order:-1 设置按钮的样式.假设其他弹性项目的初始订单值设置为0，这将允许按钮出现在输入之前.

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

这篇关于如何更改焦点输入上的搜索btn?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！