Remove outline from button in firefox

Question

I have a button that holds an image. It looks fine in chrome, and even in IE. But in firefox it leaves an ugly thick border around the button. I have tried border:none; in CSS but nothing seems to change.

Firefox button

My button code is:

<button id="next3"><img src="<?php echo $this->getSkinUrl('images/proddown.jpg') ?>"</button>

I currently have no styles attached. Any ideas how to fix this? Thank you!

posible duplicate: http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links?rq=1 — Black Sheep, May 12 '14 at 17:47
Nope, not a duplicate. I actually saw that question and the answer did not work for me. — Chris 'Pig' Hill, May 12 '14 at 17:48
I can't reproduce the issue here - http://jsfiddle.net/x67Tm/ — Josh Crozier, May 12 '14 at 17:53
That's the one. background:transparent; - Answer it and I will accept it. Thanks again for that. — Chris 'Pig' Hill, May 12 '14 at 18:05

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

In your case, you need to add background:transparent to the button element. Adding this, along side border:none should solve the problem, if not, see this question.

Example Here

button {
    background:transparent;
    border:none;
    outline:none;
}

edited May 23 '17 at 10:29

Community

1
1

answered May 12 '14 at 18:09

Josh Crozier

233,099
56
391
304

score 0 · Answer 2 · answered May 12 '14 at 17:50

0

Even every CSS code you have, it have to start with this:

* {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}

it is everytime helpful. And i hope it helps you.

answered May 12 '14 at 17:50

Remove outline from button in firefox

2 Answers2