title: Focus styling is not working correctly in a react component?
body: <p><strong>Problem:</strong></p>
  
  <p>I have created a react application there I am creating a custom search box.</p>
  
  <pre><code>&lt;div className="search-box"&gt;
    &lt;Row&gt;
      &lt;div className="search-box-icon"&gt;
        &lt;i className="fas fa-search" /&gt;
      &lt;/div&gt;
      &lt;input
        className="search-input"
        placeholder="search in listbox"
      /&gt;
    &lt;/Row&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my css stylings.</p>
  
  <pre><code>.search-box-icon {
    margin-left: 1%;
  }
  
  .search-input {
    border: none;
  }
  
  .search-input:focus {
    outline: none;
  }
  
  .search-box:focus {
    outline-color: #53c9fc;
    outline-width: 2px;
  }
  </code></pre>
  
  <p>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.</p>