Tailwindcss: Hide select arrow in internet explorer 10+

[grund3g]

Currently the default select arrow is visible in internet explorer 11. See https://tailwindcss.com/docs/examples/forms:

Would be good if it was hidden by default:

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

See https://stackoverflow.com/a/18878556/3098423

[hacknug]

And how are users supposed to know that's a select if you don't style it?

[grund3g]

I actually meant instead that the existing class appearance-none could be extended.

[sambeevors]

I'm a fan of adding it to .appearance-none

[jasonbarrows]

I also think it makes sense to add this to .appearance-none if at all possible for consistency across browsers.

[OwenMelbz]

Just to confirm - we saying that appearance-none does not work with IE?

[adamwathan]

It's not really that it "doesn't work", just that it only applies the appearance: none style which isn't quite enough to unstyle select elements in IE.

Not totally opposed to adding this because it's definitely useful, but want to be careful to make sure that this is 100% the right place to add it. Should there be a more generic reset or unstyle class that includes more than just the appearance property? Or does it make sense to add more stuff to this class even if it means the name is no longer accurate because that's what people use this class for anyways?

[hacknug]

Reading the original stackoverflow thread @grund3g shared, I think it makes sense to add it here since it's actually a requirement to reset the element's appearance in that platform. Adding it to a new utility/component would make sense if we actually needed to do something else task-wise.

In this case I feel like we're only providing the users with a class that _really_ does what it's supposed to do taking into account an old browser that's still around (which I think it's okay, as long as we get rid of it when/if dropping support for IE10).

[adamwathan]

Circling back on this, still not totally decided... In Edge, appearance-none does work, but not in IE 10/11.

The issue with adding this rule:

.appearance-none::-ms-expand {
    display: none;
}

...is that you could no longer use @apply appearance-none because of the pseudo-element, since @apply is not sophisticated enough to handle things like that properly yet.

So I'm not sure what to do, what's more important...

a) Making sure appearance-none works with @apply
b) Making sure appearance-none removes the arrow on select elements in IE 10/11

[grund3g]

Ok, so if the applicability of@apply depends on it, I would tend for a).

Actually I have a "fix" file anyway where I put all this stuff (v-cloak, ::selection, ...). So it's not really a problem for me to just add the fix for IE11 globally.

[jasonbarrows]

I think it’s important to ensure that appearance-none works with @apply so until @apply is more sophisticated I suggest we go with option a.

[hacknug]

Let's go with A and add a note on the docs then. We could also provide and extra utility to hide ::-ms-expand that wouldn't work with @apply but still could be used in every other way.

[adamwathan]

Closing this as we came to a decision on it, can revisit once @apply is improved, or maybe IE 10/11 will just be dead by then.