问题:

我已经创建了一个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添加一个轮廓。我所做的事情似乎不起作用。有人可以帮我解决这个问题吗?谢谢。

最佳答案

如果没有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>

09-10 12:21
查看更多