Crossbrowser inconsistencies with the <select>-element

[petetnt]

Some inconsistencies I saw when comparing the <select> examples across browsers (as customized ones are always pain in crossbrowser uses) (in order: Chrome 44.0, FF 39, IE11):

• The initial state on Chrome looks great, but the texts on the dropdown are nearly unreadble
• On Firefox, it nearly the opposite: the dropdown looks great (sans the beveled borders) but the default state of the box is clipped
• IE11 showcases the same text thing than Chrome, but with different color ::hover. The box doesn't scale itself when selecting a value, as measuring the dummy throws an error:

 Unable to get property '0' of undefined or null reference

        else if(type == "select") {
            // Need to use dummy element to measure :(
            var option = document.createElement("_");
            option.textContent = element.selectedOptions[0].textContent; //selectedOptions here is undefined, it doesn't seem to be supported on IE

Otherwise looking great :+1:

[LeaVerou]

Is the IE11 issue fixed?

Regarding texts being unreadable, that’s an issue with the website styling, not Stretchy (still useful to report though!)

[petetnt]

Using options[] with element.selectedIndex works great, so the sizing issue is fixed :+1:

However, cs[appearance] is undefined on IE11 in stretchy.js#L105, which is why it doesn't account for the 2em for the arrow which leads to this:

The equivalent of appearance: none; for IE10/11 is:

select::-ms-expand {
   display: none;
}

But you can't really test for it (same way you can for the appearance property). I think it would be a safer bet to account for the arrow regardless if it was there (and then remove it if you can safely say that it isn't there).

[LeaVerou]

Thanks! Is it fixed now?

[petetnt]

It is, at least on IE11 Mobile :+1:

[Ryotsuke]

Firefox: http://screenshots.ryotsuke.ru/scr_3843d48b50dc.png IE10: http://screenshots.ryotsuke.ru/scr_9dc824a5e21e.png