admin 管理员组

文章数量: 1086019

Problem:

I have created a react application there I am creating a custom search box.

<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>

This is my css stylings.

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

.search-input {
  border: none;
}

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

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

What I need to do is add an outline to search-box div when someone starts to type something on the textbox. The things I have done does not seem to be work. Can someone help me to solve this issue? Thank you.

Problem:

I have created a react application there I am creating a custom search box.

<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>

This is my css stylings.

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

.search-input {
  border: none;
}

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

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

What I need to do is add an outline to search-box div when someone starts to type something on the textbox. The things I have done does not seem to be work. Can someone help me to solve this issue? Thank you.

  • javascript
  • html
  • css
  • reactjs
  • frontend
Share Improve this question edited Mar 10, 2019 at 10:47 Soroush Chehresa 5,6981 gold badge16 silver badges30 bronze badges asked Mar 10, 2019 at 10:25 dwpdwp 9584 gold badges25 silver badges46 bronze badges 2
  • Your code works.Can you share your ponent.This is working sandbox codesandbox.io/s/ykrn4883kx – Naieem Mahmud Supto Commented Mar 10, 2019 at 10:30
  • 1 Possible duplicate of Using :focus to style outer div? – Zeyad Etman Commented Mar 10, 2019 at 10:39
Add a ment  | 

2 Answers 2

Reset to default 4

You can't do this using css/html without tabindex and according to MDN:

Avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using an <div> element to describe a button, instead of the <button> element.

and w3 says:

The content should be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead.

So the best practice for this is using addEventListener() in JavaScript, But if you want to use tabindex don't forget to add tabindex to inner html content.

Another solution

You don't have to use tabindex if you just want to change the div border. you can use :focus-within and just change the border.

.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>

You can't do focus on a div tag without tabindex.

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

本文标签： javascriptFocus styling is not working correctly in a react componentStack Overflow

版权声明：本文标题：javascript - Focus styling is not working correctly in a react component? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744082759a2530560.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。