CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rana Aalamgeer
Rana Aalamgeer

Reputation: 712

How to remove the focus border of button when click?

I am using the Bootstrap button, and I want that when I click on them the focus border should not come around the icons. The code is like below.

<div class="btn-group">
    <button class="btn btn-link"> <img src="../images/icons/User.svg" class="svg"></button>
</div>

Upvotes: 7

Views: 26010

Answers (9)

chandresh
chandresh

Reputation: 1

It will work

.svg:focus {
    border: none;
    outline: none;
}

Upvotes: 0

rjlion795
rjlion795

Reputation: 553

Add following CSS property if none of them works -

box-shadow:none !important;

Upvotes: 2

Dicka Kumara Syahlan
Dicka Kumara Syahlan

Reputation: 1

All previous answers all incorrect:

Please see below for the reason, I also added snippet at the bottom of my answer

/*incorrect*/
button:focus {
outline:none !important;
}

/*correct*/
.btn.btn-link:focus {
outline:none !important;
}

Please Learn more about CSS Selector about "class"

class ===>  using  .

id    ===>  using  #

CSS Selectors ( Also About "class")

https://www.w3schools.com/css/css_selectors.asp

"class" Names Concatenated Or Separated By a Space

https://stackoverflow.com/questions/16858926/class-names-concatenated-or-separated-by-a-space

Please check below my example which run in snippet:

/*=============Button1===============*/
.button1 {
    width: 50px;
    height: 45px;
    background-color: #c4891b;
    background-image: url('http://order.uprintinvitations.com/photothumbs/089634f1-2a24-485e-81e9-192ac6c8de07.png');
    image-rendering: -webkit-optimize-contrast;
    background-size: 50px;
    background-repeat: no-repeat;
    border: none;
    transition: transform .5s;
}
/*for changing the colong on mouse over*/
.button1:hover {
    background-color: yellow;
    transform: scale(1.1);
}
/*for removing the outline*/
.button1:focus {
    outline: none;
}
/*=============Button1===============*/

.button2 {
    width: 50px;
    height: 45px;
    background-color: #c4891b;
    background-image: url('http://order.uprintinvitations.com/photothumbs/089634f1-2a24-485e-81e9-192ac6c8de07.png');
    image-rendering: -webkit-optimize-contrast;
    background-size: 50px;
    background-repeat: no-repeat;
    border: none;
    transition: transform .5s;
}
/*for changing the colong on mouse over*/
.button2:hover {
    background-color: yellow;
    transform: scale(1.1);
}
<table border='1'>
  <tr>
    <td>
      Button 1
      <br>(onclick
      <br>no outline)
    </td>

    <td>
      Button 2
      <br>(onclick
      <br>outlined)
    </td>
  </tr>

  <tr>
    <td>
      <button class='button1' id='' name='' value=''></button>
    </td>

    <td>
      <button class='button2' id='' name='' value=''></button>
    </td>
  </tr>
<table>

<a href='https://github.com/dicka-ks'>My Github -> Dicka</a>

https://github.com/dicka-ks

Upvotes: 0

AndyW
AndyW

Reputation: 491

Its either one or several of the following lines.

button {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

I don't think you will need the :focus part at all as the actual bootstrap button is never showing. I don't at least. And maybe try and leave the !important away in case it works without it.

Upvotes: 1

j.edewa
j.edewa

Reputation: 21

If you're using Bootstrap 4 add this class to the input or button tag

shadow-none

Upvotes: 0

Yonatan Gross
Yonatan Gross

Reputation: 427

On Bootstrap 4, "shadow-none" class was added that disables the effect.

Using JQuery you can disable the effect by adding the "shadow-none" class to the relevant buttons.

  $(".btn-secondary").addClass("shadow-none");

Upvotes: 3

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

Try It Once

button:focus{
outline:0px;
}

Also Use

 button:focus{
 outline:none !important;
 }

I have to edit !important then it work fine.

Upvotes: 4

Hitesh Misro
Hitesh Misro

Reputation: 3461

Use outline:0; or outline:none; to remove the border on focus

Note: Use !important at the end of the rule to override the Bootstrap declarations

button:focus{
    outline:0 !important;
}

or

button:focus{
    outline:none !important;
}

Upvotes: 4

Jordi Flores
Jordi Flores

Reputation: 2150

Use this style to avoid the focus border on items

button:focus {
    outline: none;
}

Upvotes: 7

Related Questions