CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Smarty_Coder
Smarty_Coder

Reputation: 87

File Upload Styling in Chrome

I've a html formular in a part of a website, which only specific administration users can access. In this form, you can upload csv files. As only a small group of users can do this, the functionality is more important than the styling. So I decided not to do the usual trick overlaying a div over the field. I just want to archive one thing: The text in the field should look the in Chrome the same as in FF (vertical and horizontal centered text).

Here you can see the both renderings:

FF: https://i.sstatic.net/wbHhG.png

Chrome: https://i.sstatic.net/1BFHu.png

HTML-Code:

<input type="file" class="button blue full-width" name="csv_file" id="csv_file">

CSS-Styles:

color: #fff;
height: 50px;
line-height: 50px;
padding: 0 10%;
background-image: url("../images/item-hover-button-addtocart-normal.png");
border: medium none;
margin-bottom: 10px;
background-color: #fff;
text-align: center;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;

Upvotes: 2

Views: 1509

Answers (1)

Peder Johnsen
Peder Johnsen

Reputation: 46

You can fix one of the issues by adding this css:

input[type=file]::-webkit-file-upload-button {
    margin: 1px 0;
    height: 48px;
}

This makes the button take up more height like in FF and also makes the text vertically centered.. Not so sure how to horizontally center it though, maybe someone else might know a trick.

A jsfiddle to show it working: http://jsfiddle.net/bcwk8qvt/

[edit] You can make it centered horizontally by adding most of your original CSS to a div wrapped around the input field like this: http://jsfiddle.net/bcwk8qvt/3/ You still need to keep some of the css on the input field too though for FF to show it the same way.

Upvotes: 3

Related Questions