title: Change bootstrap file input focus glow color in reactjs
body: <p>I have this file input that I would like to change the color of the blue glow when I select it.</p>
  
  <p><a href="https://i.stack.imgur.com/YJs9K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YJs9K.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;Form className='col-12'&gt;
      &lt;input type='file' className='custom-file-input' id='batch-file'
             onChange={e =&gt; this.setState({file: e.target.files[0], fileName: e.target.files[0].name})}/&gt;
      &lt;label className='custom-file-label' htmlFor='customFile'&gt;{this.state.fileName}&lt;/label&gt;
  &lt;/Form&gt;
  </code></pre>
  
  <p>Ive tried changing CSS to this:</p>
  
  <pre><code>input:focus, input[custom-file-input]:focus, .uneditable-input:focus {
      border-color: $custom-orange;
      box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px $custom-orange;
      outline: 0 none;
  }
  </code></pre>
  
  <p>As I have seen in many examples. I'd prefer to do it in the style sheet I've made and not go into the actual bootstrap docs.</p>
  
  <p>A good example of what I want comes straight from the Bootstrap website. How do they make the searchbox highlight in purple?</p>
  
  <p><a href="https://i.stack.imgur.com/wKw5x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wKw5x.png" alt="When Not Selected"></a></p>
  
  <p><a href="https://i.stack.imgur.com/NXnXd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NXnXd.png" alt="When Selected. How can I make it purple instead of default blue?"></a></p>
  
  <p>Edit:</p>
  
  <p>It looks like a few changes gets me closer to the result I want.</p>
  
  <p>JSX:</p>
  
  <pre><code>&lt;Form className='file-form col-12'&gt;
      &lt;input type='file' className='custom-file-input' id='batch-file'
             onChange={e =&gt; this.setState({file: e.target.files[0], fileName: e.target.files[0].name})}/&gt;
      &lt;label className='custom-file-label' htmlFor='customFile'&gt;{this.state.fileName}&lt;/label&gt;
  &lt;/Form&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>.file-form:focus, .file-form:active, .file-form:hover{
      border-color: $custom-orange;
      box-shadow: 0 1px 1px rgba(229, 103, 23, 0.6) inset, 0 0 8px $custom-orange;
      //outline: 0 none;
   }
  </code></pre>
  
  <p>It works almost. There is still a blue glow once i click it.</p>
  
  <p><a href="https://i.stack.imgur.com/BGWgM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BGWgM.png" alt="enter image description here"></a></p>