[Bug] Appearence-none has browser inconsistencies

[laurencei]

Using appearence-none on forms is hit and miss depending on browsers.

Firefox has a red border on required fields if they remain empty:

And chrome likes to throw a blue focus on the input field:

I've made a CodePen here where you can see the issues by loading different browsers. https://codepen.io/anon/pen/ypabzP

Suprising IE works fine for once in my life 🤷‍♂️

[laurencei]

Ok - so to fix the Chrome issue according to https://stackoverflow.com/q/2943548/1317935 we would need to change tailwindcss/src/generators/appearance.js

- 'appearance-none': { appearance: 'none' },
+ 'appearance-none': { appearance: 'none', outline: 'none' },

[laurencei]

And to fix Firefox this works:

- 'appearance-none': { appearance: 'none' },
+ 'appearance-none': { appearance: 'none', box-shadow: 'none' },

So therefore can we do the following - and it should fix for everyone:

- 'appearance-none': { appearance: 'none' },
+ 'appearance-none': { appearance: 'none', outline: 'none', box-shadow: 'none' },

[tlgreg]

Is this in the scope of tailwind?

Beside the reset there are no workarounds for browser inconsistencies. Utilities are generally map to a single css property. So if you wish to add these you could add utility outline-none shadow-none, though outline-none does not exists in the core.

As most utilities map to a css property value this change would feel like a side-effect to me under appearance-none.

[laurencei]

I understand what you are saying.

But when you type appearance-none - you expect it to handle the suitation. i.e. it is a very explicit class with only one intention. It is kind of special type of normalizie that you are specifically applying to remove all the effects.

We already handle browser insonsitencies by adding -webkit etc to some properties - so in a way we are already doing it.

I think think is a special enough case for it, but I agree it should not be the norm.

Anyway - see where @adamwathan et al want to take it..

[adamwathan]

Hey @laurencei! I don't consider this a bug, appearance-none just sets appearance: none. How the browsers behave with that property set is what it is. That utility is not supposed to do anything other than set that property to that value.

But when you type appearance-none - you expect it to handle the suitation. i.e. it is a very explicit class with only one intention.

It's explicit intention is to set the appearance property to none, that's all. appearance refers to how the browser adds special styling to controls, like adding a down arrow to a select box or adding up/down buttons to a number input. You can learn more about it here:

https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

It would be extremely misleading for appearance-none to do anything other than appearance: none. To me that's like if font-bold also set background-color: green.

@tlgreg is right; if you want to remove the focus outline, use a utility designed to remove the focus outline. If you want to remove the box shadow, use a utility designed to remove the box shadow. appearance-none is for setting the appearance property, it's not called input-reset or something.

[laurencei]

@adamwathan - ok - understood.

I've already added this as an extra CSS rule in my project to get around it.