How to get rid of the input glow in Bootstrap SASS with Chrome/Firefox?

Question

I am trying to extend Bootstrap. I do not want to touch any of the Bootstrap core files, so I have created my own styles.scss and in there I have the following:

@import "custom/variables";

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

@import "custom/modular-styles";

In _variables.scss I am overwriting some of the variables (e.g. getting rid of rounded corners).

In _modular-styles.scss I call various other SASS partials that I want to customise (e.g. _forms.scss).

In _forms.scss here is what I've done:

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

    &::-ms-expand {
        border: 0;
        background-color: transparent;
    }

    &:focus {
        outline: none;
    }

    &[disabled],
    &[readonly],
    fieldset[disabled] & {
        background-color: $input-bg-disabled;
        opacity: 1;
    }

    &[disabled],
    fieldset[disabled] & {
        cursor: $cursor-disabled;
    }
}

Shouldn't that work? Yet I am still seeing the outline glow when an input is on :focus

I would start by asking whether you really should? I know it's nice for you to have your website look consistent on all browsers, but this isn't good for the user. A user who always uses Chrome should get a consistent "Chromey" experience across all sites. — Rik Lewis, Jan 26 '17 at 13:56
@RikLewis Regardless, Bootstrap already modifies the default behavior of textboxes. — Quangdao Nguyen, Jan 26 '17 at 14:13

score 4 · Accepted Answer · answered Jan 26 '17 at 14:04

4

The glow on focus in Bootstrap is given by a box-shadow on :focus, like this:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

If you want to modify your focus styles add sth like this:

.form-control {

  &:focus {
     box-shadow: none;
     /* your new styles */
  }

}

answered Jan 26 '17 at 14:04

Daniel Sixl

2,488
2
16
29

Here a sample with Bootstrap v.3.3.7 to show that it works: http://www.bootply.com/g8AKj3OnTb – Daniel Sixl Jan 26 '17 at 14:20
then it must be SASS ordering! :( Can you see an issue? From what I can tell, my `_forms.scss` is loaded **after** the bootstrap stuff – J86 Jan 26 '17 at 14:21
Do you have a URL to look at? – Daniel Sixl Jan 26 '17 at 14:21
Nope, this is all local, I am trying to learn how to work with Boostrap SASS – J86 Jan 26 '17 at 14:22
Use a new file for modifying BS. Call that custom file after Bootstrap. Overwrite both, -webkit-box-shadow and box-shadow there. – Daniel Sixl Jan 26 '17 at 14:26

user5365075 · Answer 2 · 2018-06-22T11:42:51.230

You can do it by overriding the sass variables:

$input-box-shadow: none;
$input-focus-box-shadow: none;
$input-btn-focus-box-shadow: none;

And in case that doesn't do the trick (I've seen some weird behaviors with files ordering):

.form-control {
  &:focus {
    box-shadow: none !important;
  }
}

Just a hint, but make sure you've imported Bootstrap only once. Once I had forgotten to remove it from my angular.json (former angular-cli.json) and that caused conflicts.

Syden · Answer 3 · 2017-01-26T14:12:38.503

0

Try adding the following CSS:

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

edited Jan 26 '17 at 14:12

answered Jan 26 '17 at 13:57

Syden

8,425
5
26
45

Yep I think I am. My `_forums.scss` sits within `_modular-styles.scss` and that is loaded **after** I load the Bootstrap stuff – J86 Jan 26 '17 at 14:10

score 0 · Answer 4 · edited May 23 '17 at 11:52

0

From what I recall, you need to override the outline in the :focus pseudo class, not just the main css class

.form-control {
    ...
    &:focus {
        outline: none;
    }
}

See: How to remove the border highlight on an input text element

edited May 23 '17 at 11:52

Community

1
1

answered Jan 26 '17 at 13:58

noggin182

627
4
14

Thanks, I just added that, but I still get the glow! – J86 Jan 26 '17 at 14:06
Are you able to paste your full (compiled) css? This example works for me: https://jsfiddle.net/50mjut5d/ – noggin182 Jan 26 '17 at 14:46

score 0 · Answer 5 · answered Sep 05 '18 at 21:02

Try adding the following css

.form-control:focus {
  box-shadow: none;
}

Explanation: In Bootstrap, the value of box-shadow changed when the input tag is focused, so the transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out worked.

Hope it helps.

How to get rid of the input glow in Bootstrap SASS with Chrome/Firefox?

5 Answers5