Remove blue highlight over html image when clicked

Question

I am making a custom Application in Android. I am displaying a html page with an img tag inside a div.

<div class="press">
    <img src="but.png" width="150" height="62" border="0"/>
</div>

In the javascript I am writing:

$(".press").bind("click",function()    
{
//display something
});

When I click on the image, the click is working but the image is surrounded with a blue overlay.

Image 1

Image 2 when image clicked

I dont understand how to remove it. I have tried many ways but none of the answers work. Please help. Thanks

possible duplicate of [Prevent the default blue selection on click](http://stackoverflow.com/questions/12433062/prevent-the-default-blue-selection-on-click) — Ryan Lynch, May 08 '13 at 04:55
hey ryan ... the solution in that post did not work for me... — Vinraj, May 08 '13 at 06:13

Parthik Gosar · Answer 1 · 2013-05-08T05:04:32.387

33

You can prevent selection on your page through css. You can change the * selector to the element selector you want to prevent from selection.

/*IE9*/
*::selection 
{
    background-color:transparent;
} 
*::-moz-selection
{
    background-color:transparent;
}
*
{        
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    /*IE10*/
    -ms-user-select: none;
    user-select: none;

    /*You just need this if you are only concerned with android and not desktop browsers.*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}    
input[type="text"], textarea, [contenteditable]
{

    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

edited May 08 '13 at 05:04

answered May 08 '13 at 04:59

Parthik Gosar

10,998
3
24
16

could you create a jsfiddle for it ? – Parthik Gosar May 08 '13 at 10:44
6

`-webkit-tap-highlight-color` was exactly what I was looking for! Thanks a lot !! – pmrotule Sep 02 '14 at 20:11

Rohan Kumar · Answer 2 · 2013-05-13T05:03:18.560

3

Try this:

CSS

.press, img, .press:focus, img:focus{
    outline: 0 !important;
    border:0 none !important;
}

edited May 13 '13 at 05:03

answered May 08 '13 at 05:00

Rohan Kumar

40,431
11
76
106

Now try the above I made changes. – Rohan Kumar May 08 '13 at 07:00
i am still getting the same error Rohan. I am actually using android platform with an augmented reality application which displays a browser on top of camera. – Vinraj May 08 '13 at 08:26
hi rohan thanks for the support but the error still remains and i get a new black background around the image.. – Vinraj May 08 '13 at 09:16

score 2 · Answer 3 · edited May 23 '17 at 11:54

2

You could use CSS:

** HTML **

<button class="press">
    <img src="but.png" width="150" height="62" border="0"/>
</button>

** CSS **

.press{
    outline-width: 0;
}

.press:focus{
    outline: none;
}

Answer take from here: How to remove the border highlight on an input text element

edited May 23 '17 at 11:54

Community

1
1

answered May 07 '14 at 18:45

Sacha Nacar

2,308
20
14

score 0 · Answer 4 · answered May 08 '13 at 04:59

It may be the background color or the border color on the div that includes the button. Else use a code like following to remove the css after click completely

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

Remove blue highlight over html image when clicked

4 Answers4

Linked

Related