Input Image has highlight box when pressed rapidly

See more:

Mobile

iPhone

Android

image

I am working on a mobile auction page for an upcoming event. I have two buttons. 1) a triangle image that raises the bid price 2) a circle image that submits the bid.

The triangle has a concave bottom where the circle image sits inside of. The images change when pressed from normal state to indented just to show that they are being pressed. I am using `onmousedown` and `onmouseup` events for the images.

<input id="btnraise" class="btnraise" type="image" src="bidraise-up.png" onmousedown="touchStartRaise()" onmouseup="touchEndRaise();" />
<input id="btnbid" class="btnbid" type="image" src="mobilebid-up.png" onmousedown="touchStart()" onmouseup="touchEnd()"/>

I have two event listeners for each image in order to meet the requirements for different mobile platforms (i.e. windows phone, iPhone, Android). I started this way because from what I know, for iPhone uses the touch events and this works best for them. (I may be mistaken. If you know better about this let me know)

var btnbid = document.getElementById('btnbid');
btnbid.addEventListener('touchstart', touchStart, false);
btnbid.addEventListener('touchend', touchEnd, false);

var btnraise = document.getElementById('btnraise');
btnraise.addEventListener('touchstart', touchStartRaise, false);
btnraise.addEventListener('touchend', touchEndRaise, false);

That is the background so you understand what I have. Now when I test out this page on different platforms I get this box like the button is highlighted when the input image is pressed. Only on mobile. I don't know what this is. Can someone help? Does all this make sense?