CODEWITHSUNDEEP
htmlcss
user2202413
user2202413

Reputation:

css text-indent on input text doesn't work in internet explorer 10

i'm trying to customize a text input with css, i want the text inside it to have a margin of 10px to the left so i use:

#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}

It works in all browsers except for IE10 which seems to ignore the text-indent property, how can i fix it?

<input type="text" id="text" />

Upvotes: 4

Views: 11814

Answers (2)

razz
razz

Reputation: 10120

you can use padding-left, it works on all browsers:

#text {
    padding: 0 0 0 10px;
    border: 1px solid #333;
    outline: none;
    margin: 0;
    width: 158px; //decrease width with the same padding vale so that the width would stay the same
    height: 20px;
    border-radius: 4px;
}

Upvotes: 8

Yeoj Onacsot
Yeoj Onacsot

Reputation: 81

If you want to use a special rule for IE, adding display: inline-block and a line-height, along with the text-indent rule, will fix this as well. This is an old trick for both IE7-9 as well. 

input.special {
    text-indent: 150px;
    display:inline-block;
    line-height: 18px;
}

Does the trick.

This is good if you are using liquid or responsive widths and you don't want to have to adjust your input's width on account of the padding.

Upvotes: 8

Related Questions