Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the blue box shadow border in button if clicked

I want to do is remove the button blue box shadow effect in my class btnd if the button is click.

current output:

i tried this but it doesnt work.

.btnd:active,
.btnd.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
like image 837
user3729634 Avatar asked Jun 14 '14 18:06

user3729634


People also ask

How do I get rid of blue border?

Answer: Use CSS outline propertyIn Google Chrome browser form controls like <input> , <textarea> and <select> highlighted with blue outline around them on focus. This is the default behavior of chrome, however if you don't like it you can easily remove this by setting their outline property to none .

How do you remove the border on a button focus?

If you want to remove the focus around a button, you can use the CSS outline property. You need to set the “none” value of the outline property.

How do you unset a box shadow?

To remove the box-shadow, we will add an additional class . box-shadow-none. Used Classes: .

How do I remove a button shadow in bootstrap?

Use the . shadow-none class in Bootstrap to remove shadow.


1 Answers

Blue shadow is browser default :focus state

.btnd:active,
.btnd:focus,
.btnd:focus:active {
  background-image: none;
  outline: 0;
  box-shadow: none;
}
like image 196
Matej Janovčík Avatar answered Sep 27 '22 22:09

Matej Janovčík