elkarte/Elkarte — pull request #1316 by Spuds (2014-01-28 18:02:00+00:00)
Title: Select Boxes

This is to use a common format for the select box across OSs and browsers. Should be safe for B2 but can wait to after that as well, or even 1.1 if we want.

What it does. In short (ok not so short) It uses browser appearance settings on the select box to turn off the arrow and styles them as buttons ``` appearance: button; -webkit-appearance: button; -moz-appearance: button; -ms-appearance: button;

It then turns off the rest of the < select > styling, border, background, etc. All < selects > are then wrapped in a div that contains the styling and since its a div, it acts the same / looks the same across browsers. The div has a background image of a down arrow on the right side.

For modern browsers, chrome, Fx, safari (at least 6), ie10+ the < select > in the div drives the width of the div so it acts as a normal select (grows to the width of the largest select item.

For older browsers there is no way to turn off the select arrow, so the select is made larger than the containing div which positions the default arrow outside of the div and therefore hidden. The div will still grow per the < option > content but has a min width setting (you can make this smaller but the select width % would need to grow which will begin to give problems with long option values). I tested this on ie8 and it worked as expected, really quite well with some edge cases where its not as nice as the modern way.