IE10 Input extra/inherited padding?

[ldoodle]

Hey,

Is there a known ‘problem’. For instance input type text seems to have extra padding/margin at the top so it pushes down in comparison to other browsers, and even IE9 and less.

Also, the Browse button in input type file also seems to inherit padding from it’s parent, despite setting padding 0 on ::-ms-browse, so it blows up the entire input type file.

http://i.imgur.com/JbmbYMk.png – Top one is IE10.

http://i.imgur.com/DQeNw6W.png – Browse button has extra padding top and bottom, because it inherits from the parent input type file. Bottom one is IE10.

[magicspon]

Hello,

This might be a line-height issue.

good luck

[Senff]

We’d have to see the underlying code — out of the box, I don’t think there’s an issue with input boxes right away.

See http://codepen.io/senff/full/aHmvL , which looks pretty much the same in Chrome, Firefox, IE10 and IE9.

[ldoodle]

        Add Files

input[type=”file”] {

padding: 7px 5px; <------ this padding actually puts padding inside the Browse button
-webkit-padding-before : 0;
-webkit-padding-after : 0;
width : 700px;

}
input[type=”file”], x:-moz-any-link {

padding: 4px 0 4px 4px;

}
input[type=”submit”], x:-moz-any-link {

padding: 6px 0 7px 0;

}
::-ms-value {

background-color : #fff;
border : 0;
margin : 5px 0 0 0;
padding : 0;

}
::-ms-browse {

border : 1px solid #737173;
border-radius : 4px;
font-family : inherit;
margin : 5px 8px 8px 0;
padding : 0 8px;

}
::-webkit-file-upload-button {

background-color : #f2f3f8;
border : 1px solid #737173;
border-radius : 4px;
font-family : inherit;
margin : 5px 5px 5px 0;
padding : 2px 8px;

}

[Senff]

?

Please elaborate.

[Paulie_D]

Yeah, we need to see a live link or a Codepen reduced case.

[ldoodle]

Try this: http://jsfiddle.net/mCTUT/17/

In IE9 and less, Firexfox and Chrome/Opera, it’s spot on. The padding on input[type=”file”] is putting the padding on the actual input and not the value and browse button, whereas in IE10 it is applying the padding to the value and browse button rather than the ‘main’ input.

Remove the padding from the input[type=”file”] and see what happens in IE10. Make it stupidly big and also see what happens in IE10.

Putting a top/bottom padding on the ::-ms-browse button itself does not seem to overwrite what it is inheriting.

[ldoodle]

This is it with the Upload (submit) button next to it: http://jsfiddle.net/mCTUT/21/

[ldoodle]

And this is it pretty much perfect for IE9 and less, Firefox and Chrome/Opera: http://jsfiddle.net/mCTUT/29/

IE10 looks terrible!

[Senff]

OK, I thought you were having issues with a normal text input field.

I think it’s important to keep in mind that the UPLOAD button is one of the most difficult elements to style (or actually, quite impossible) and that it doesn’t only differ between browsers, it also differs between OS’s. You probably won’t be able to make it look exactly the same on every browser/OS. Even if you try, you’re going to end up with a lot of browser-specific hacks.

So to answer your original question, “Is there a known ‘problem’“, I would say yes, it is a known problem, but it’s not a bug per say.

Personally, I try to keep upload fields as standard as possible myself. Saves me a lot of trouble. An alternative is to use some jQuery plugins that will re-style it completely, and that’s where you can make it look all the same cross-browser, cross-OS.

(Though technically, you don’t style the upload field, but you replace it with some HTML and CSS)

[Author]

Posts