CODEWITHSUNDEEP
htmlcssfirefox
Awesome
Awesome

Reputation: 6609

Focus outline appears after padding in firefox

I have the following style class for button -

.buttonStyleClass {
    padding:5px 20px;
}

When I try to focus the button in Firefox, then focus outline is appearing inside the button after padding. But when you verify the same in Chrome you will find the focus to entire button including padding.

In my application focus outline seems to odd in firefox since it is appearing 20 pixels inside of button.

Is there any CSS fix for this issue ?

Thanks,
Gopal

Upvotes: 2

Views: 1880

Answers (4)

Malcalevak
Malcalevak

Reputation: 81

I realize this is a very old question, but no one has actually answered the question yet, and several people have given bad advice. Given I got here via Google, other people may come here and leave with that bad advice.

For accessible reasons, you should never remove styling like this, unless you replace it with something better.

Instead of:

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

Try: 

button::-moz-focus-inner {
  padding: inherit;
}

Try out this 

button { padding: 10px; border: 1px solid red;}
button.no-outline { border: 1px solid blue; }
button.no-outline::-moz-focus-inner { outline: none; border:0; padding: 0; }
button.better-outline {border: 1px solid green; }
button.better-outline::-moz-focus-inner { padding: inherit; }
<button>my button</button>
<button class="no-outline">without outline</button>
<button class="better-outline">with better outline</button>

Upvotes: 1

DreamTeK
DreamTeK

Reputation: 34177

Are you viewing this in a web browser? You said 'application' in your query.

If I understand correctly you are saying that:

Chrome : outlines around the button area inside padding.

Firefox : outlines the area outside padding.

This is a browser specific rendering problem.

Two solutions come to mind.

Don't use padding for you button instead use:

.buttonStyleClass {
    height:50px;
    line-height:50px;
    text-align:center;
}

Alternatively use -webkit targeting to write specific browser css markup.

http://jsfiddle.net/JV6MH/4/

This fiddle should render focus outline the same in both firefox and chrome by avoiding the use of padding on buttons.

Upvotes: 0

Surjith S M
Surjith S M

Reputation: 6740

Add this to your CSS.

.buttonStyleClass:active { 
  outline: 0; 
}

Upvotes: 0

giorgio
giorgio

Reputation: 10202

Actually in both Firefox and Chrome I see the outline OUTSIDE of the button... Check out this fiddle. You can easily hide the outline though:

.buttonStyleClass { outline: 0; }

If this is not the answer; could you provide us with a fiddle or screenshot of what you mean?

edit

It's probably a bit OS-specific, as I only saw the dotted (inner) outline when I added a explicit border to the button (button { border: 1px solid red; }).

You can remove, or alter, the outline with the :-moz-focus-inner selector, like this:

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

Also check out the updated fiddle

Upvotes: 1

Related Questions