639246 - input=file border is unstylable

Status: UNCONFIRMED

(Core :: Layout: Form Controls, defect)

Description

[avrs]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.15) Gecko/20110303 Firefox/3.6.15
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.15) Gecko/20110303 Firefox/3.6.15

Is understandable that styling of the file input fields is limited, however when trying to style the file field, Firefox applies an ugly 3D border to it.

This doesn't look pretty, it'd be much more appealing to the eye if the border was "solid/thin". No matter if you try to define the border to e.g. border:1px #000 solid; Firefox just ignores it.

Reproducible: Always

Steps to Reproduce:
1. Create a new page
2. Add the CSS input{border:1px #000 solid;}
3. Add a <input type="file" /> field
4. Test
Actual Results:  
The border is not solid, it's 3D outset. Firefox ignored the border-style part

Expected Results:  
Firefox should render the file input field with a black 1 pixel solid border around the textfield part
(Firefox should honor border:0; as well)

Styling file inputs is hard, because there is no specification of how they should look like (e.g. webkit browsers use a different approach), however browser vendors should try to apply as much as possible styling in order to make them more seamless with the webpage. Styling more parts of the file field like the Browse button would be welcome as well.

Comment 1

[Ed Morley [:emorley]]

Please can you attach an html testcase to this bug, as well as a screenshot.

Comment 2

[Boris Zbarsky [:bzbarsky]]

You're talking about the border of just the textfield part, right?

The relevant forms.css rule is:

435 input[type="file"] > input[type="text"] {
436   border-color: inherit;
437   background-color: inherit;
438   color: inherit;
439   font-size: inherit;
440   letter-spacing: inherit;
441 }

So you're seeing it pick up just the border-color, but not the width or style, as expected....

I suppose we could inherit the border entirely.  David, thoughts?

Comment 3

[avrs]

Yes, the border style and width.

( Also a further remark, I noticed that setting the height affects only the button part of the field, and the width does not stretch the field unless you use the size attribute to do so. It would be nice if both parts had the same height and width could be adjusted as well, just for consistency's sake and now that the size attribute is removed from the HTML5 spec. )

Comment 4

[avrs]

Attachment: Proposed result

The second field is the proposed solution on how border in a file input should behave. The border color, style and width should be applied.