5

I discovered a strange issue today which seems to be a bug in Firefox 35.0. When specifying a text-indent property for a select element, Firefox seems to double the pixel value. Other browsers are correctly displaying the indent.

Is there a workaround to avoid this? I'm forced to use text-indent rather than padding to work around various other browser inconsistencies (specifically webkit on a Mac). I need to use text-indent but I'm unable to stop the value from doubling in Firefox.

Here's an example showing the issue: http://jsfiddle.net/k92dvxte/1/

Thanks for the help.

AJReading
  • 1,193
  • 20
  • 35

1 Answers1

11

Explaining what @sydonia said:

You'll just have to put this code after the select rule in your CSS:

@-moz-document url-prefix() {
    select {
       text-indent: 50px;
    }
}
AJReading
  • 1,193
  • 20
  • 35
Sandro Eric
  • 332
  • 2
  • 9
  • 2
    Expanding on this slightly with further explanation after my research: the `@document` at-query can be used with `url-prefix` to specifically target firefox as a hack. Typically `@document url-prefix()` can be used to apply specific CSS styles when the URL matches a prefix defined in `url-prefix()`. This hack uses the `@-moz-document` vendor prefix to specifically target Firefox and not other browsers. Leaving the url-prefix empty will match every URL. https://developer.mozilla.org/en-US/docs/Web/CSS/@document – AJReading Jan 23 '15 at 11:53
  • @HerrSerker, yes, a handy workaround. I would welcome a real solution to fix it! – AJReading Jan 23 '15 at 15:12
  • Just think of the situation when you change the value of the indent. You should remember to change the value for FF as well. Unless you have a calculated value made with a CSS preprocessor like LESS or SASS or similar.This is prone to errors. – yunzen Jan 23 '15 at 15:23