Bug 9348 – Not all styles available to other input elements apply to type="file" and type="password"

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Forms

[John Lascurettes]

When trying to apply styles to input elements, the latest nightly build will apply them to inputs of type "text", "button", "submit" and "reset". However, border is not applied to "password" or "file" types. Type of "file" not accepting much in the way of styles is consistent with most other browsers. However, in other browsers that allow styling on input elements of type="text", they will apply the same styles to type="password". This inconsistency in WebKit can create interface problems with pages such as log-in screens.

[John Lascurettes]

Created attachment 8759 [details]
Attachment to test behavior. Shows these input elements with styles applied: text, password, button, submit, reset, file.

[Alexey Proskuryakov]

The problem with password fields is tracked in bug 6990. Looks like file inputs are completely styled in Firefox, so I'm keeping this bug open to track the problem with these.

[Dimitri Bouniol]

For the file input, if Webkit decides to add styling to it (which is poorly supported in other browsers), how will the text part appear since there in no textfield for Webkit? Will it show a background?

[Dave Hyatt]

It will not have a background by default (which is the way it works now I believe).  We'll probably support styling of the button via a pseudo-element.  Because our file upload control never lets a user enter a file without bringing up a file dialog, we can safely allow the control to be styled.

[John Lascurettes]

Created attachment 9082 [details]
More fully fleshed out test page (with comparisons of other browser behavior)

This test page shows more completely the behavior of CSS on each form element. Comparisons of other major browsers are included.

[Dimitri Bouniol]

You should add "-khtml-appearance: none;" to get checkboxes and radio buttons styled.

[Adam Roben (:aroben)]

<input type="file"> is now implemented in the engine instead of as a widget, and therefore should support most styling. You can style the button explicitly using the pseudo-element ::-webkit-file-upload-button. There does seem to be a bug where the border doesn't appear unless you set border-style explicitly, and bug 10824 says that the "no file selected" text doesn't always appear. But we're getting closer!

[Brent Fulgham]

I don't see differences between Chrome, Safari, and Firefox on this page -- except that Firefox did not center the "Search by State" options (while Chrome and Safari did).

If there are still relevant issues here that are not covered by WPT, please REOPEN this bug with details.