How to remove the "Dotted Border" on clicking?

Question

As you can see

alt text

I want to somehow remove the dotted lines after the button has been clicked.Any ideas how ?

Thanks

GUYS : This is the current status of my CSS ansd HTML but still no USE:

.myButton input {
position:absolute;
display:block;
top: 5%;
left:87%;
height: 44px;
border:none;
cursor:pointer;
width: 43px;
font: bold 13px sans-serif;;
color:#333;
background: url("hover.png") 0 0 no-repeat;
text-decoration: none;
}
.myButton input:hover {  
background-position: 0 -44px;
color: #049;
outline: 0;
}
.myButton input:active {
background-position: 0 -88px;
color:#fff;
outline: 0;
}

input:active, input:focus {
      outline: 0;
}

<div class="myButton">
<input type="submit" value="">
</div>

Nothing seems to be happening !!

possible duplicate of [CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?](http://stackoverflow.com/questions/4285970/css-firefox-how-to-deactivate-the-dotted-border-firefox-click-indicator) — Csq, Sep 02 '14 at 00:15

score 17 · Answer 1 · answered Dec 07 '10 at 08:25

17

You have to style the <a> like:

a {outline: none}

answered Dec 07 '10 at 08:25

Linus Kleen

33,871
11
91
99

it actually needs the `!important` rule to work: `a {outline: none !important}` – Barnabas Jun 24 '22 at 13:08

kobe · Answer 2 · 2010-12-07T08:50:17.547

6

use the below code

a:active
    {
    outline: none;
    }

try for other browsers also

a:focus
{
-moz-outline-style: none;
}
a:focus { outline:none }

edited Dec 07 '10 at 08:50

answered Dec 07 '10 at 08:25

kobe

15,671
15
64
91

I suggest to use a CSS class for this, so all other links still keep the "you were here" behavior. – Aaron Digulla Dec 07 '10 at 08:30

score 5 · Accepted Answer · answered Dec 07 '10 at 08:28

5

Possible with pure HTML as well:

<a href="..." hidefocus="hidefocus">...</a>

And with JavaScript you can do that on all links:

window.onload = function WindowLoad(evt) {
   //hide focus:
   var arrLinks = document.getElementsByTagName("a");
   for (var i = 0; i < arrLinks.length; i++) {
       arrLinks[i].hideFocus = "true";
}

answered Dec 07 '10 at 08:28

Shadow The GPT Wizard

66,030
26
140
208

i was only having this issue in ie7 and older. but adding the hidefocus worked for me – nate_weldon Feb 13 '13 at 16:09
Cheers @nate glad this was useful for you. :) – Shadow The GPT Wizard Feb 14 '13 at 07:32

score 3 · Answer 4 · answered Dec 07 '10 at 08:25

3

Despite my comment on your question,

You should keep them for accessibility.

You can find your CSS-trick here for this

(Anyway, you should keep them.)

answered Dec 07 '10 at 08:25

Shikiryu

10,180
8
49
75

score 1 · Answer 5 · answered Sep 01 '14 at 22:21

If you want to keep the outline on active and on focus, but hide it on clicking a link, you can add in css:

A.No-Outline {outline-style:none;}

and use script:

$('A').hover(function() {
    $(this).addClass('No-Outline');
},function() {
    $(this).removeClass('No-Outline');
});

you must be hover befor clicking, so it does the job.

score 1 · Answer 6 · answered Dec 07 '10 at 08:25

1

    #myElement { outline: 0; }

Try this on your element, i dont now if is an image, div, button, link. But it works

answered Dec 07 '10 at 08:25

danieelito

51
3

This is a very helpful answer. I have a div that I wanted to remove the outline from and this works. Inline, my code looks like this `

` This is part of some code which display 6 "tile regions" across the page. Each region is clickable and the outline does not appear when the region is clicked. – sail0r Nov 17 '15 at 15:26

How to remove the "Dotted Border" on clicking?

6 Answers6

Linked

Related