(Css) Eliminating Browser's 'Selected' Lines Around a Hyperlinked Image

(CSS?) Eliminating browser's 'selected' lines around a hyperlinked image?

You'll want to add the following line to your css:

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

(Assuming your tabs are done using the a element, of course.)

[edit] On request from everyone else, for future viewers of this it should be noted that the outline is essential for keyboard-navigators as it designates where your selection is and, so, gives a hint to where your next 'tab' might go. Thus, it's inadvisable to remove this dotted-line selection. But it is still useful to know how you would do it, if you deem it necessary.

And as mentioned in a comment, if you are only dealing with FF > v1.5, feel free to leave out the -moz-outline-style:none;

How can I remove the outline around hyperlinks images?

For Remove outline for anchor tag

a {outline : none;}

Remove outline from image link

a img {outline : none;}

Remove border from image link

img {border : 0;}

CSS - Is there a way to get rid of the selection rectangle after clicking a link?

Do you mean the dotted outline of a target?

Try:

:focus {
    outline: 0;
}

This would remove all focus outlines. IT's essentially the same as onclick in JavaScript terms. You might prefer to apply this to a:focus.

CSS / IE - Remove the dotted lines when select something in IE

In your css:

a {
  outline: none;
  border: none; /* eventually, IE specific, not sure */
}

how to remove the dotted line around the clicked a element in html

Use outline:none to anchor tag class

How to remove dotted border around active hyperlinks in IE8 with CSS

Try this CSS:

a:active, a:selected, a:visited { 
    border: none;
    outline: none;
}

Note that this has to be after any a:hover rules. Thanks to PEra in the comments for suggesting using the a:selected selector as well.

NOTE

The above does not work in IE 9. Removing a:selected causes it to work in IE9.

Remove the underline from Hyperlinked Image

You should probably add this line of css so that any images within a link do not show borders or underline.

.Logo a,.Logo a img{
border:none;
text-decoration:none;
}

Also as a side note, unless you have multiple logos you should probably use ID instead of CLASS as a best practice. You only use classes in css when there is the potential to have multiple elements needing the same styles.

Therefore making the code:

#Logo a, #Logo a img{
border:none;
text-decoration:none;
}

How to remove black border around hyperlinked image?

img {
    border: 0
}

Or old-fashioned:

<img border="0" src="..." />
     ^^^^^^^^^^

How to get rid of border around and image used as a link in Firefox?

Links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text

To remove it, simply use:

a {
    outline: none;
}

Or you can do what I do, and remove it from all elements (I use my own focus/active rules) and do

* {
    outline: none;
}

This will remove it from all elements.

HTML/CSS removing little line by link when using embedded image

///Add this code in CSS file
a {
    text-decoration:none;
}

---

Related Topics