search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.64k stars 32.22k forks source link

Native Select has different text indent to Input or non-native Select #8946

Closed thomascobb closed 6 years ago

thomascobb commented 6 years ago

Expected Behavior

I would expect native and non-native Selects to left justify their text with the same text indent as an Input.

Current Behavior

Currently on firefox on Windows and Linux the native select (the middle one in the screenshot below) has a text indent where the others don't:

screenshot-2017-11-1 sandbox - codesandbox 1

Steps to Reproduce (for bugs)

https://codesandbox.io/s/zn4k1yq153

Context

I'm making lists of Inputs and native Selects, and it looks odd when they have different text indents ## Your Environment
Tech Version
Material-UI 1.0.0 beta 19
React 15.5.3
browser firefox
etc
oliviertassinari commented 6 years ago

The only workaround I found was to reduce the text-indent on Firefox. https://stackoverflow.com/questions/28108434/firefox-select-element-doubles-text-indent-value. Unfortunately, I wasn't able to implement this hack with JSS.

@kof Have you every handled @-moz-document url-prefix() to target Firefox only in the past? Otherwise, I think that we will close this issue as I'm not aware of anything actionable.

kof commented 6 years ago

wow, what a hack)

kof commented 6 years ago

It can be implemented using JSS plugins API. I am not sure this plugin should be in the core because it is such an edge case.

thomascobb commented 6 years ago

Thanks for the workaround/hack!

As I don't use any selects anywhere else in my application, I'm happy to use the hack in a top level CSS file. If you do manage to implement this with JSS that would be wonderful, otherwise feel free to close this.

oliviertassinari commented 6 years ago

I'm closing the issue, it's an edge case, with no clear simple solution.