Redesign of <input type="file"> element

[Amenthes]

1. What is the problem you are trying to solve?
Styling of the HTML 4 <input type="file"> element;

2. What is the feature you are suggesting to help solve it?
Split this element in one parent and two children, like so:

<input type="file">
<input type="text">
<input type="button">
</input>

3. What is the processing model for that feature, including error handling? This should be very clear, including things such as event timing if the feature involves events, how to create graphs representing the data in the case of semantic proposals, etc.
I will let this part open for now...

4. Why do you think browsers would implement this feature?
First of all, Mozilla has implemented it internally in the XUL engine, that's where my idea came from. I found in some source files of the Mozilla Thunderbird email client these CSS lines of code:

input[type="file"] > input[type="text"] {
border-color: inherit;
background-color: inherit;
color: inherit;
font-size: inherit;
height: inherit;
letter-spacing: inherit;
}

/* button part of file selector */
input[type="file"] > input[type="button"] {
height: inherit;
font-size: inherit;
letter-spacing: inherit;
border:solid red 2px;
}

I did try to style my file input like so in Firefox 2 for a test case but apparently isn't working, and anyways, it would only be supported by Mozilla. Now, the problem I was thinking of was whether should be redesigned the input type file element so that it allows the above specified children or simply exposing some internal elements for styling without the need for extra markup. As far as I'm concerned any of these would be great as long as browser vendors would respect the standards when implementing. Finally I choose for the extra markup version as document authors might want to stick some event handlers on the elements, combine classes (I realize that this is apparently not necesarily but who knows where imagination can go) or what not. Another argument is that CSS specifications do not have a part concerning form controls. This is a choice of browser vendors. While my proposal might not solve the problem is anyhow much more easily than introducing some new CSS selectors to deal with this kind of elements (another one would be a slider like one, which I haven't think about yet and but found in the Web Forms 2.0 specifications).

5. Why do you think authors would use this feature?
Because we all want that and it's close to impossible to do that nowadays. The only implementation I have seen is on the new version of Yahoo! Mail, but it heavily uses javascript to support all major browsers whereas my proposal is a simple CSS styling problem which could be done right now if the input file element would be split in two.

6. What evidence is there that this feature is desparately needed?
Apparently none because it's so hard to have a workaround. I, personally came to this conclusion after I saw some people asking on boards, IRC channels and at work, if they can style the element in discussion with CSS. The response was, undoubtedly, no. Well, you could do some very, very little styling on them, but only on some browser which is anyway inconsitent and limited to, say, font color or borders. For the button part, there's no hope.


I hope my proposal was consistent and interesting enough. I'm really interested in any feedback you may have. If this has been talked before I apologize in advance.

[zcorpan]

1. What is the problem you are trying to solve?
Styling of the HTML 4 <input type="file"> element;

I think this will be addressed by XBL2:

http://www.w3.org/TR/xbl/

Changing the markup in HTML is not possible in this case due to backwards compatibility constraints.