Chrome CSS - Styling File Input

Question

Here is my file input rendered in Chrome:

enter image description here

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).

Mahima · Accepted Answer · 2011-02-01 09:35:43Z

4

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.

answered Feb 1, 2011 at 9:35

Mahima

5191 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BiAiB · Accepted Answer · 2011-02-01 09:43:55Z

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; }

answered Feb 1, 2011 at 9:43

BiAiB

14.4k11 gold badges47 silver badges64 bronze badges

Comments

Ben Marshall · Accepted Answer · 2018-08-16 23:04:27Z

0

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;
}

answered Aug 16, 2018 at 23:04

Ben Marshall

1,7642 gold badges18 silver badges36 bronze badges

Collectives™ on Stack Overflow

Chrome CSS - Styling File Input

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related