18

Go to http://jsfiddle.net/srLQH/ and fill in the input text box in the "Result" view.

If you do this in FF, Chrome, and Safari, your text will stop 20px short of the right side.

In IE 7/8, the text does not stop 20px short--it goes all the way to the edge of the input box.

What's the deal with IE? How can I get the same padding effect in IE that all the other browsers give me?

SnickersAreMyFave
  • 5,047
  • 8
  • 26
  • 24

8 Answers8

7

I have been looking for a way to solve this. A colleague found a solution and we tested it and it works perfectly. So the thing is to remove the padding: right and add a border: 20px solid transparent.

nhahtdh
  • 55,989
  • 15
  • 126
  • 162
Monica
  • 1,524
  • 4
  • 27
  • 44
  • this works pretty well for ie8. Modernizr adds the class "ie" to the HTML element which makes it easy to separate ie hacks. Use "box-sizing: border-box;" with it. – Silkster Sep 19 '13 at 20:06
  • 1
    This works for other popular browsers as well. No need to make an exception for IE. By the way, left padding also needs to be treated this way. – feklee Feb 03 '14 at 17:43
  • mrust's answer is the -real- solution – Wouter Jun 23 '15 at 10:10
5

I've found one way of doing it, but its not pretty.

http://jsfiddle.net/dmitrytorba/dZyzr/162/

<!--[if IE]>
<style type="text/css">
input {
  border: none;
  margin: 5px;
  padding-right: 0px;
}
.wrapper {
    border: 1px #aaa inset;
}
.spacer{
    margin-left: 20px;
}
</style>
<![endif]-->


<span class='wrapper'>
    <input type='text' />
    <span class='spacer'></span>
</span>​
Dmitry Torba
  • 2,973
  • 1
  • 19
  • 12
3

I know this question is old, but after a lot of searching, I found a solution that works.

You can add the "padding" back to IE by adding margins on the value using the following.

default input padding


    input[type="text"]{
        padding-left:17px;
        padding-right:17px;
    }

padding for IE inputs


    input[type="text"]::-ms-value {
        margin-left:17px;
        margin-right:17px;
    }

but then you'll need remove the padding for IE 10+ (so it doesn't use both) which you can do with this media query. 


    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        input[type="text"] {
            padding-left:0;
            padding-right:0;
        }
    }
ajmccallum
  • 41
  • 4
2

This is an older question, but I fixed this in IE10 by following this:

How to fix this it For IE-10 :

::-ms-clear {
  display: none;
}

Or for a specific input :

.anyinput::-ms-clear {
    display: none;
}

See more information here: http://sarveshkushwaha.blogspot.com/2014/06/ie-right-align-text-input-issue.html

Chewpers
  • 2,430
  • 5
  • 23
  • 30
  • Just used this for a Kendo MaskedTextBox, worked perfectly when none of the other answers did/were appropriate. Thanks :-) – tony Apr 14 '15 at 12:47
  • This was the real cause of the problem, and solution. Thanks! – Wouter Jun 23 '15 at 10:12
2

It appears as if IE is applying the CSS, just not until the very end of the line. That is, the padding is influenced by the value, rather than the value influenced by the padding.

When setting the padding to 20px all the way around with a default value longer than the default width, you can scroll to the end and see the padding. http://jsfiddle.net/dZyzr/

You're going to have to come up with some visual trick, or just use a different style sheet for IE.

Robert
  • 21,110
  • 9
  • 55
  • 65
2

Just chuck it in another element which does do padding in IE, such as a div. Then you don't need to worry about ugly hacks invalidating your css stylesheet. Remember to remove the padding from the input so it doesn't annoy other browsers. This is also the only way to give a text box a background image which doesn't scroll with the text in IE.

Randy the Dev
  • 25,810
  • 6
  • 43
  • 54
  • mrust's answer is the -real- solution – Wouter Jun 23 '15 at 10:10
  • @Wouter All of the answers were fine when the question was asked in 2010, no need to downvote everyone. – Randy the Dev Jun 30 '15 at 00:54
  • http://stackoverflow.com/help/privileges/vote-down : "Use your downvotes whenever you encounter ... an answer that is clearly ... incorrect." In light of the correct answer, all others are clearly incorrect imho. I understand this was not the case in 2010, but I don't see how that's relevant today. Nothing personal ;) – Wouter Jun 30 '15 at 08:03
-1

You can use css property text-indent for this element:

For example:

<input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" />
Brotheryura
  • 1,158
  • 13
  • 21
  • How come this didn't get upvoted?! omg Is the site broken. I guess it's cause they were asking for left padding but I found this useful.:) – AturSams Jul 31 '14 at 13:42
  • Would have been nice to see a more effective solution – Davis Dec 09 '14 at 12:06
-1

Try this ie hacks

input{
 padding-right : 20px /* all browsers, of course */  
 padding-right : 20px\9; /* IE8 and below */  
 *padding-right : 20px; /* IE7 and below */  
 _padding-right : 20px; /* IE6 */  
}

demo

http://jsfiddle.net/srLQH/2/

Tips

padding dont work well with html form element ie input textarea like that try changing it to margin

input{
 margin-right : 20px /* all browsers, of course */  
 margin-right : 20px\9; /* IE8 and below */  
 *margin-right : 20px; /* IE7 and below */  
 _margin-right : 20px; /* IE6 */  
}

since in jsfiddle , you have single element, why dont you try

margin-left instead of margin-right

Pramendra Gupta
  • 14,667
  • 4
  • 33
  • 34