时间戳

首页 > 解决方案 > 焦点样式在反应组件中无法正常工作？

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

问题描述

问题：

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

<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 添加一个大纲。我所做的事情似乎并不奏效。有人可以帮我解决这个问题吗？谢谢你。

标签： javascripthtmlcssreactjsfrontend

解决方案

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

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

w3 说：

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

所以最好的做法是使用addEventListener()in JavaScript，但如果你想使用tabindex不要忘记添加tabindex到内部 html 内容。

另一种解决方案

tabindex如果您只想更改div边框，则不必使用。您可以使用: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>

推荐阅读