CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
nunomira
nunomira

Reputation: 398

How to remove button glow in bootstrap-4

How to remove the glow that appears around the button when you click it?

<div class="container">
  <div class="row">
      <div class="col-md-12 mt-5">
          <button type="button" class="btn btn-primary">Primary</button>
      </div>
  </div>
</div>

https://www.bootply.com/vHRldZZt8u

Upvotes: 8

Views: 8684

Answers (4)

Al-Noor Ladhani
Al-Noor Ladhani

Reputation: 2433

In general, what I do is add an own class to the button, select etc... and next disable the box-shadow.

So for example, this is how I put my own FOCUS effect on a SELECT dropdown in Bootstrap 4:

HTML:

<select class="custom-select my_custom_dropdown">
    <option class="my_custom_dropdown_option">" value="_below">Below this item</option>
    <option class="my_custom_dropdown_option" value="_inside">Inside this item</option>
</select>

CSS:

.my_custom_dropdown:focus{
    
    outline: none !important;
    border:2px solid #FF4519;
    text-decoration: none;
    
    box-shadow: none !important;
    -webkit-appearance: none;   
}

On FOCUS:

The box-shadow none will remove the Highlight effect of Bootstrap 4.

And the border line will add my own custom border effect.

Upvotes: 0

Bogdan M.
Bogdan M.

Reputation: 2181

I have this solution, it removes the glow from any element (css selector: *) of you can scope outlines on components but you will need to specify it in a CSS class.

*:hover,
*:focus,
*:active
 {
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none;
}

Upvotes: 2

nunomira
nunomira

Reputation: 398

This code seems to have solved it:

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:focus, .btn-primary.focus
{
    box-shadow:none;
}

Upvotes: 1

pradeep kumar
pradeep kumar

Reputation: 1011

css:

.btn-primary:focus,
.btn-primary:active{
    box-shadow:none !important;
    outline:0px !important;
}

Try this CSS Code, Replace .btn-primary with your respective class .btn-*

Upvotes: 9

Related Questions