Question

问题：

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

<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并根据MDN，您不能使用css / html来做到这一点：

避免将tabindex属性与非交互式内容一起使用，以使某些内容可以通过键盘输入进行交互式聚焦。例如，使用<div>元素而不是<button>元素来描述按钮。

and w3 says:

应使用交互式元素（<a>，<button>，<details>，<input>，<select>，<textarea>等在语义上描述内容）。

因此，最佳做法是在addEventListener()中使用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>

Answer 2

没有x*jpegHeight/textureWidth y*jpegWidth/textureHight w*jpegHeight/textureWidth h*jpegWidth/textureheight，就不能专注于div标签。

tabindex

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

2 个答案:

另一种解决方案