CODEWITHSUNDEEP
csstwitter-bootstrapsass
J86
J86

Reputation: 15237

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

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

Upvotes: 1

Views: 2964

Answers (5)

J.Wang
J.Wang

Reputation: 101

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.

Upvotes: 0

user5365075
user5365075

Reputation: 2279

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.

Upvotes: 3

Syden
Syden

Reputation: 8625

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

Upvotes: 0

Daniel Sixl
Daniel Sixl

Reputation: 2499

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 */
  }

}

Upvotes: 4

noggin182
noggin182

Reputation: 637

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

Upvotes: 0

Related Questions