Styling the "browse" button on a file upload field

[gazmccarthy]

I am having problems trying to style a button which is part of a file upload field…

This is my code:

<div id="DataUploadForm">
            @using (Html.BeginForm("Upload", "DataManagement", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                <fieldset>                    
                    <label for="file">Choose Data File: </label>
                    <input id="txtFileUpload" type="file" name="file" title="Click here to select a datafile." />
                    <input id="btnFileUpload" class = "bluBtn" type="submit" value="Upload" onclick="return FileUploadValidate();" title="Upload selected file to system." />
                </fieldset>

            }
</div>

This is the upload field without any CSS
http://img405.imageshack.us/img405/7818/1n8.png

This is the upload field when I add my “bluBtn” CSS class http://img802.imageshack.us/img802/7522/1ld5.png

How can I create CSS that will just target the browse button, and not the overall field?

[Paulie_D]

I’m not sure you actually can without doing a hide and replace thing using javascript.

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

[Author]

Posts