Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the border around image appearing after clicking on the image in Google Chrome?

Actually I'm using a plugin SpryTabs to navigate the menu. I've used two background-images for activating and deactivating of tabs. I'm activating a tab on hover. Means the tab gets highlighted and deactivate the selected tab on clicking other tab.

Until here everything is fine. But the real problem comes when user clicks on the tab after hover, the border gets displayed around the image.

This doesn't happen in Firefox, it happens only in Chrome and IE.

like image 925
PHPLover Avatar asked Mar 01 '13 11:03

PHPLover


People also ask

How do I remove the outline of a picture?

Remove a border from a picture Select the picture whose border you want to remove. On the Page Layout tab, in the Page Background group, select Page Borders. Click the Borders tab. Under Setting, select None.

How do I hide a picture border?

Adding border="0" to your img tag prevents that picture from having a border around the image. However, adding border="0" to every image would not only be time consuming but also increase the file size and download time. To prevent all images from having a border, create a CSS rule or file with the following code.

How do you remove the border from a picture in Google Docs?

If you want to remove the border from your Google Docs image, click the image again and select "None" in the "Text background color" menu.

How do I eliminate the blue border around linked images?

Approach: We can remove this default behavior by either defining our own border or by completely removing it using css. We can select specific images using a css class or id, to select all hyperlinked images we will use the parent-child css selector.


2 Answers

Had same issue once, following style fixed problem:

outline: 1px solid transparent;

Btw outline:none has no effect for chrome for some reason

like image 140
Sergio Avatar answered Oct 13 '22 01:10

Sergio


You can add the following code in CSS for specific elements

textarea:focus, input:focus{
    outline: none;
}

And for all elements on a page use this generalized code in your css

*:focus {
    outline: none;
}

This worked for me when there was an orange coloured border appearing around the images and input boxes.

like image 44
PHPLover Avatar answered Oct 13 '22 01:10

PHPLover