Posted by Steve Pugh on 05/25/05 02:01

Eirk <eirk@nospa.m> wrote:

>is there any way to give focus to an INPUT type=file *textfield* using
>css? That is:
>
>--->this works:
>
>input[type="text"]:focus {
> background-color: #FFCC00;
>}

Nitpick - that doesn't "give focus" to the element, it just changes
the style of the element when it recieves focus.

(And of course IE doesn't support attribute selectors or the :focus
pseudo class, but you probably know that)

>--->while this doesn't work:
>
>input[type="file"]:focus {
> background-color: #FFCC00;
>}

The file input is effectively unstylable. As most (but not all)
browsers display it as a combination of two widgets and as CSS
doesn't provide any way to address those two widgets independently
there's no not a lot you can do.

(Also would you want the focus state to be triggered when the focus
was on the textbox widget or the button widget or both?)

Some people go down a rather convoluted route whereby they hide the
actual <input type="file"> and instead have a standard text input and
a standard button that can be styled independently. They then use
JavaScript to pass actions and results back and forth between the
real, hidden input and the fake, visible ones.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

[Back to original message]