问题:
我已经创建了一个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>