title: How to get rid of the input glow in Bootstrap SASS with Chrome/Firefox?
body: <p>I am trying to extend Bootstrap. I do not want to touch any of the Bootstrap core files, so I have created my own <code>styles.scss</code> and in there I have the following:</p>
  
  <pre><code>@import "custom/variables";
  
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
  
  @import "custom/modular-styles";
  </code></pre>
  
  <p>In <code>_variables.scss</code> I am overwriting some of the variables (e.g. getting rid of rounded corners).</p>
  
  <p>In <code>_modular-styles.scss</code> I call various other SASS partials that I want to customise (e.g. <code>_forms.scss</code>).</p>
  
  <p>In <code>_forms.scss</code> here is what I've done:</p>
  
  <pre><code>.form-control {
      display: block;
      width: 100%;
      height: $input-height-base;
      padding: $padding-base-vertical $padding-base-horizontal;
      font-size: $font-size-base;
      line-height: $line-height-base;
      color: $input-color;
      background-color: $input-bg;
      background-image: none;
      border: 1px solid $input-border;
      border-radius: $input-border-radius;
      box-shadow: none; // this use to be @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
      @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
      outline: none; // this use to be @include form-control-focus;
  
      @include placeholder;
  
      &amp;::-ms-expand {
          border: 0;
          background-color: transparent;
      }
  
      &amp;:focus {
          outline: none;
      }
  
      &amp;[disabled],
      &amp;[readonly],
      fieldset[disabled] &amp; {
          background-color: $input-bg-disabled;
          opacity: 1;
      }
  
      &amp;[disabled],
      fieldset[disabled] &amp; {
          cursor: $cursor-disabled;
      }
  }
  </code></pre>
  
  <p>Shouldn't that work? Yet I am still seeing the outline glow when an input is on <code>:focus</code></p>