焦点样式在反应组件中无法正常工作？

Question

问题：

我已经创建了一个反应应用程序，我正在创建一个自定义搜索框。

<div className="search-box">
  <Row>
    <div className="search-box-icon">
      <i className="fas fa-search" />
    </div>
    <input
      className="search-input"
      placeholder="search in listbox"
    />
  </Row>
</div>

这是我的 CSS 样式。

.search-box-icon {
  margin-left: 1%;
}

.search-input {
  border: none;
}

.search-input:focus {
  outline: none;
}

.search-box:focus {
  outline-color: #53c9fc;
  outline-width: 2px;
}

当有人开始在文本框中输入内容时，我需要为搜索框 div 添加一个大纲。我所做的事情似乎并不奏效。有人可以帮我解决这个问题吗？谢谢。

Answer 1

如果没有tabindex，您将无法专注于div 标签。

<div 
  className="search-box" 
  tabIndex="1" // add this line
>
  ...
</div>

Answer 2

如果没有tabindex 和MDN，您将无法使用css/html 执行此操作：

避免将tabindex 属性与非交互式内容结合使用，以使旨在通过键盘输入成为交互式焦点的内容。例如，使用 <div> 元素来描述按钮，而不是 <button> 元素。

and w3 says:

内容应使用交互元素（<a>、<button>、<details>、<input>、<select>、<textarea> 等）进行语义描述。

因此，最好的做法是在JavaScript 中使用addEventListener()，但如果您想使用tabindex，请不要忘记将tabindex 添加到内部html 内容中。

另一种解决方案

如果您只想更改div 边框，则不必使用tabindex。 您可以使用 :focus-within 并更改边框。

.search-box {
  margin-left: 1%;
  outline: red;
  border: 1px solid #fc3;
}

.search-input {
  border: none;
}

.search-input:focus {
  outline: none;
}

.search-box:focus-within {
  border: 2px solid #53c9fc;
}

<div class="search-box">
  <Row>
    <div class="search-box-icon">
    </div>
    <input
      class="search-input"
      placeholder="search in listbox"
    />
  </Row>
</div>