Chrome CSS - Styling File Input - css

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.

Answer 2

you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }

Answer 3

For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}