CODEWITHSUNDEEP
css
user1065425
user1065425

Reputation:

Differences between text in link and input/button

How to remove the difference displaying buttons in Firefox and Chrome?

Case: jsfiddle

Upvotes: 0

Views: 152

Answers (2)

ShadowChaser
ShadowChaser

Reputation: 5608

Most solutions posted for this have accessibility problems - they completely remove the focus outline.

To fix the padding but have the focus work the same as other links, try this:

button::-moz-focus-inner {
  padding: 0;
  border: none;
}

button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

Upvotes: 0

kizu
kizu

Reputation: 43234

You must reset the styles for Fx' -moz-focus-inner pseudo-element:

.btnViolet::-moz-focus-inner {
    padding: 0;
    border: none;
}

Here is a fixed fiddle: http://jsfiddle.net/kizu/XTjtg/25/

Upvotes: 1

Related Questions