CODEWITHSUNDEEP
htmlcssinternet-explorerpadding
SnickersAreMyFave
SnickersAreMyFave

Reputation: 5143

HTML: IE: Right padding in input text box

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?

Upvotes: 18

Views: 26602

Answers (8)

ajmccallum
ajmccallum

Reputation: 41

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

Upvotes: 3

Chewpers
Chewpers

Reputation: 2440

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

Upvotes: 2

Brotheryura
Brotheryura

Reputation: 1188

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

For example:

<input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" />

Upvotes: -1

Monica
Monica

Reputation: 1534

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.

Upvotes: 7

Dmitry Torba
Dmitry Torba

Reputation: 2983

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>​

Upvotes: 5

Randy the Dev
Randy the Dev

Reputation: 26710

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.

Upvotes: 2

Pramendra Gupta
Pramendra Gupta

Reputation: 14873

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

Upvotes: -1

Robert
Robert

Reputation: 21388

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.

Upvotes: 2

Related Questions