CSS How to get rid of border that appears around custom button on and after click

StackOverflow https://stackoverflow.com//questions/22083833

  •  24-12-2019
  •  | 
  •  

Question

I have a custom button class (created on-line as this is my first attempt at a web page). When it is clicked and until something else is clicked a grayish border appears around the button as a box with probably a two pixel thickness. When something else is clicked it goes away (My custom button has rounded corners so it is quite visible.

This does not appear on Safari on OS-X but does appear with Chrome. With FireFox the border is 1 pixel thick and appears a box inside my custom box. (It's not going to run on IE as we are stuck with IE8 for a while.) It is annoying.

HTML: 

<button class='command-btn' type='button' id='find-camera-btn'>Find Camera</button>

CSS3:

.command-btn {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   color: blue;
   width: 130px;
   height: 40px;
   float: left;
   margin: 6px 0px 5px 10px;
   background: -moz-linear-gradient(top, #0aa31b 0%, #d7de16 99%, #ebeb0e);
   background: -webkit-gradient(linear, left top, left bottom, from(#0aa31b),
     color-stop(0.99, #d7de16), to(#ebeb0e));
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
   border-radius: 14px;
   border: 1px solid #6d8000;
   -moz-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px
     rgba(255, 255, 255, 1);
   -webkit-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px
      2px rgba(255, 255, 255, 1);
   box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px
     rgba(255, 255, 255, 1);
   text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.2), 0px 1px 0px
     rgba(255, 255, 255, 0.4);
}

I'm using Dart but it doesn't matter what code is in the "OnClick" method. If I could move the focus after the click that would solve the problem but I don't know how to do that.

Was it helpful?

Solution

Addind the rule:

outline: 0;

should do the work

OTHER TIPS

.command-btn,
.command-btn:focus,
.command-btn:active {
    border: 0;
    outline: 0;
}

Have you tried outline: none?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top