Styling asp file upload browse button - asp.net

Question

I have an asp button with certain style. but when i apply the same style to asp file upload control, only background change to that style. The browse button is still the same.
Asp code is
<div>
Please Select Excel File:
<asp:FileUpload ID="fileuploadExcel" runat="server" CssClass="addkey_btn" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" OnClientClick="showDivPageLoading();" CssClass="addkey_btn" />
</div>
CSS is
.addkey_btn {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
I want to apply the same css to Browse button as in Upload button. Any suggestions?
EDIT1
Any pure CSS way of doing this?

Answer 1

It is very difficult to style input[type=file] reliably across browsers. The only cross-browser solution is the one demonstrated by #Vitorino, using label and/or pseudo-elements to hide the actual input and then style that element/pseudo-element instead.
This answer doesn't repeat that, but offers a pure CSS alternative which is browser dependent. That said, this should not be used in production websites, this is just a proof-of-concept or a demo.
Modern browsers are implementing somewhat non-standard extensions to enable user-styling of hitherto nigh-impossible element features. This allows developers to override default user-agent stylesheet to a large extent.
Custom-extensions:
Specifically, for input[type=file] at least Trident (for IE-10 and above) and Webkit (for Chrome, Safari) allow styling of this element to some extent without resorting to hacks like hidden elements, or absolutely positioned pseudo-elements. For this case, the vendor-specific extensions of our interest are:
-webkit-appearance (to enable override of user-agent style in Webkit-based browsers)
::-webkit-file-upload-button (to enable styling of the browse button in Webkit browsers)
::-ms-browse (to enable styling of the browse button in Trident-based browsers, i.e. IE)
::-ms-value (to enable styling of text input in Trident browsers, i.e. IE)
Caveats:
Unfortunately, there are no -moz- extensions for this in Gecko/Mozilla based browsers. Specifically, at least Firefox doesn't allow styling of the browse button at all.
IE does not allow changing the position of the browse button from right to left. Has to be further verified, perhaps it is using -ms-flex to control that?
Demo:
Example Fiddle: http://jsfiddle.net/abhitalks/hxv19bbg/7/
Example Snippet:
The following snippet will work perfectly in IE-10/11 and Chrome-39 (that is what I tested against), but will not work with Firefox.
* { box-sizing: border-box; margin: 0; padding: 0; }
div { margin: 8px; }
input[type=file], input[type=file] + input {
display: inline-block;
background-color: #eee;
border: 1px solid gray;
font-size: 15px; padding: 4px;
}
input[type=file] + input {
padding: 13px;
background-color: #00b7cd;
}
::-webkit-file-upload-button {
-webkit-appearance: none;
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
::-ms-browse {
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
input[type=file]::-ms-value { border: none; }
<div>
<label>Select File: </label>
<input id="browse" type="file" />
<input class="btn" type="button" value="Submit" />
</div>

Answer 2

you can style label and place it on top of choose file button
.btn,
label.choose:before {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
label.choose:before {
content: 'Choose file';
padding: 3px 6px;
position: absolute;
}
<div>
<label class="choose">
<input id="browse" type="file" />
</label>
<input class="btn" type="button" value="Submit" />
</div>