0

Hi I'm searching for a solution, to have a crossbrowser style for my select. At the moment, my select (dropdown) looks different in chrome, firefox, safari and IE. I found some questions, but they didn't really helped me. Has someone an idea how to do this? The goal is, that my select looks same in every browser.

I tried this css:

    select {
        transition: border-color ease-in-out 0.15s;
        background: transparent;
        border: 1px solid $BORDER_COLOR;
        outline: 0;
        padding: 5px;

        -webkit-user-select: none;
        -moz-user-select: -moz-none;
        -ms-user-select: none;
        user-select: none;

        -webkit-appearance: none;
        -moz-appearance: radio-container;
        appearance: none;

        background: url("../../assets/images/arrow.svg") no-repeat center right;
    }

Thanks

webta.st.ic
  • 4,781
  • 6
  • 48
  • 98

2 Answers2

2

Another option is not using selects. You can build a dropdown, as ibm does:

http://www.ibm.com/design/language/resources/animation-library/ios-drop-down

Use a ul instead. And go cross-browser all the way.

But usually, when I have to do this, I wrap it in a div and I add a pseudo-element to that parent hiding the carrot. Make sure you give a height (not line-height) to the select element. And then you control the height of the pseudo-element.

pollobravo
  • 21
  • 4
1

What about that ? http://jsfiddle.net/jphase/quqnmoun/ From : http://robido.com/css/pure-css-select-dropdown-style-override-the-default-select-dropdown-styles-with-css/

It uses these selectors

select::-ms-expand
select:-moz-focusring

It says it works for Chrome 45.x, Firefox 41.x, and Internet Explorer 11.x. But not tested for older version

Vashnak
  • 352
  • 1
  • 6