Question

Here is my file input rendered in Chrome:

In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)

My default CSS for inputs is:

input{
    font-family: arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color:White;
    background-image:url(../images/buttonBG.png);
    height:27px;
    border:1px solid #000;
    border-radius: 7px;
    -moz-border-radius: 7px;
    padding: 5px 20px 5px 20px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    text-shadow: 0px 1px 2px #000;
}
input:hover{
    text-shadow: 0px 1px 2px #fff;
    background-image:url(../images/buttonBGo.png);
}

As you can see there are two types of text on the control, is it possible to style both individually?

Also is there any way to specifically select file inputs? Like input.file (doesn’t seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).

Answer 1

Though i have never implemented it anywhere but while studying about the same i came across this url

http://pixelmatrixdesign.com/uniform/

This might help you out.