search

wet-boew / wet-boew-styleguide

A style guide for the Web Experience Toolkit.
http://wet-boew.github.io/wet-boew-styleguide/index-en.html
36 stars 32 forks source link

Inconsistent Button treatments - Forms #136

Open rubinahaddad opened 10 years ago

rubinahaddad commented 10 years ago

From HE: #29

Problem: In Basic Example, the ‘Submit’ button’s visual design differs from the nearby ‘Choose File’ button and they from other buttons on the page, for no obvious reason.

Suggestion: Use consistent styling everywhere.

pjackson28 commented 10 years ago

Not really possible as the "Choose file" button is dynamically generated by the browser so we can't apply the Bootstrap markup and CSS to it. That is the same reason why we can't change the button text, or make it specific to the language of the page (browsers make it specific to the language of the browser).

burgvan commented 10 years ago

@pjackson28 There appears to be a few alternatives that can solve this problem: http://stackoverflow.com/questions/21842274/cross-browser-custom-styling-for-file-upload-button

LaurentGoderre commented 10 years ago

Interesting!!! http://jsfiddle.net/sv32N/

LaurentGoderre commented 10 years ago

Great find @burgvan

pjackson28 commented 10 years ago

The problem with that approach is it forces a button-only approach across all browsers. So for instance the area that actually shows the name of the selected file will be lost. We should not be diminishing native functionality in the name of consistency.

LaurentGoderre commented 10 years ago

This would be an excellent candidate for the Shadow DOM.....maybe one day

burgvan commented 10 years ago

Well you can use JavaScript to show the name of the selected file too. Here's an example I found: http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

pjackson28 commented 10 years ago

Browser support for the Shadow DOM is coming but we still have a long way to go for cross-browser support (http://caniuse.com/shadowdom). There are some possible future polyfills (https://github.com/Polymer/ShadowDOM) but they may come with a fairly significant performance cost.

So I don't see there being a solution to this issue in the near future but perhaps someday down the road.

pjackson28 commented 10 years ago

@burgvan The problem is that we effectively have to code a full replacement for native functionality, including forcing DOM changes through JavaScript. That is a lot of support effort and fakery to just override the default appearance of input type="file". We would also have to tackle WAI-ARIA support, and test extensively, to make this behave correctly on screen readers (and would have to have JavaScript running on every page to check for the existence of input type="file").

I don't think it is a good idea to proceed with any of this unless we can find a CSS-only solution that does not negatively impact end users.

LaurentGoderre commented 10 years ago

It seems WebKit has a Shadow DOM already for it: -webkit-file-upload-button

pjackson28 commented 10 years ago

Yes, Chrome added Shadow DOM support a while back as did Opera. A few other browsers added support recently (or will very soon) but there are still very noticeable omissions such as IE, Safari and iOS Safari which don't have support in any version and there is no clear indication as to when that support will be added.

LaurentGoderre commented 10 years ago

Actually, IE 10 has it. Firefox surprisingly doesn't