IOS3 even works fine but isn't quite as prettyįirefox (all versions) - select menu when open is wider then it needs to be (by ~50px) to clip off the native arrow. One minor caveat: setting the select to 110% means the menu may open up a bit wider than expected in Firefox. Worst case, the native select styling and the custom arrow will both show up but in all popular platforms, this looks very good and consistent. This technique seems to be functional everywhere since we're still leaving the native select in place. r=rocĬonfirmed to work in the following browsers Mozilla to address this issue (Target: v.35)īug 649849, part 1 - Make -moz-appearance:none on a combobox remove the dropdown button (for WebKit compat). Ī very long option name to test wrapping and visual collisions We then add the custom arrow via a pseudo element to the right. There is a wrapper around the select that has the majority of the button styles (gradient, shadow, border, etc.). The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select's text visible. How this works: This styles a native select consistently cross-platform with only minimal CSS. Try below code sample: CSS-only custom-styled selects v8
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |