How to get rid of dotted line on content

Question

Some times I see a black-dotted border like line around text or content when clicked. That mostly happen with Firefox. I tried to set border: none; to get rid of it with no success.

Here is the sample code:

<div class="main">
    <div class="sub">
        <button>Show</button>
    </div>
</div>
<span>
    <button  class="styled-button">
         Click
    </button>
</span>

Here is the CSS:

button {
    outline: 0;
    border: 0;
    text-decoration:0;
    -moz-outline-style: 0;
}
.styled-button {
    color: #fff;
    background: green;
    height: 36px;
    width: 145px;
    padding: 2px 25px;
    margin: 10px;
    outline: none;
    border: none;
    text-decoration: none;
   -moz-outline-style: none;
}
span {
    outline: 0;
    border: 0;
    text-decoration:0;
}

Could any one suggest me a fix for that? Why does it appear at first place?

Update:

I thought I was able to fix it at some point. But some of my content still has the issue and that is in Mozilla Firefox. I have updated the question with code. Please check out the fiddle

Answer 1

I have faced similar issues in the past and it's usually been a simple trick to stop this dotted line syndrome from appearing on your content. This is how I do it:

   outline: 0;
   border: 0; 

Answer 2

consider <a href="#">click</a>

Now to remove the outline you need to apply some css

a{
   outline:0;
  }

styling for any way a link is about to be used

 a:hover, a:active, a:focus {
     // style it
  }

For Firefox inputs you can try

  input::-moz-focus-inner { 
     border: 0; 
   }

For IE9 you can use the below

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

You can also try for

 a{
    outline: 0;
    outline-style:none;
    outline-width:0;
  }