Skip to content
This repository has been archived by the owner on Apr 4, 2022. It is now read-only.

Select styling bug on mac os #80

Closed
zoxon opened this issue Jun 5, 2017 · 7 comments
Closed

Select styling bug on mac os #80

zoxon opened this issue Jun 5, 2017 · 7 comments

Comments

@zoxon
Copy link

zoxon commented Jun 5, 2017

image

Chrome 58.0.3029.110 (64-bit)
Mac OS Sierra 10.12.5

This bug is reproduced on Safari 10.1.1 (12603.2.4) too

@Chalarangelo
Copy link
Owner

Thank you very much for reporting this!

What exactly is the bug? It looks unstyled as far as I can tell. Is that the problem?

@zoxon
Copy link
Author

zoxon commented Jun 5, 2017

Thank you for quick response. Dropdown is looks unstyled.

@Chalarangelo
Copy link
Owner

Well, this is part of the progressive enhancement idea of the framework. Certain components will use a fallback instead of the custom styling under circumstances (OS, browser, feature support). Although I'd love to be able to fix this issue, problem is I don't have a system running said OS, so my only options are to rely on the help of people using said OS and browser to indetify the cause of the problem for me.

As far as I can tell this is not a browser bug, as Chrome displays the dropdown properly on both Windows and Linux (tested both), so it's an OS bug. If you have some experience with CSS, why don't you try inspecting the element and fiddling with its style (padding, borders etc) to see if anything works? As soon as you figure out what might, post it here or even better make a Codepen, so I can see what I can do to fix this permanently.

I'm really sorry that MaxOS support is not as great as everything else, this is due to me not having an Apple platform to test on. I'll try to figure out if there is any way to test these things myself. Sorry for all the inconvenience!

@zoxon
Copy link
Author

zoxon commented Jun 6, 2017

This code can help. But you need to create a custom dropdown arrow.

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

I have added this styles in chrome and now it looks like this

image

@Chalarangelo
Copy link
Owner

There might be a possible workaround, using something like what you just did and some :after styling to make it look like a dropdown. I'll see if this can be fixed at the root of the problem, otherwise I will post a workaround for people with this kind of problem.

Additonally, one could go asking around Reddit (/r/webdev, /r/css) and/or StackOverflow for possilble reasons of this happening and how to fix said issue.

@Chalarangelo
Copy link
Owner

#82 addressed this issue in a pretty smart manner. I took that code and improved it, essentially unifying the way <select> elements will look across all platforms and browsers. Update will be live in a little bit!

@s-comp
Copy link

s-comp commented Feb 12, 2019

Hello where I can see this solution?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants