Skip to content Skip to sidebar Skip to footer

Padding A Text Input In IE... Possible?

I have a text input with a search buton absolute positioned over it... to make space for the button I used some padding to keep the text from going under the button, which is fine,

Solution 1:

try using line-height


Solution 2:

I had this issue also i solved it by adding the following line

input 
{
    overflow:visible;
    padding:5px;
}

hope this helps? Let me know.


Solution 3:

Try border-right instead of padding-right. This worked for me.


Solution 4:

Make your input transparent and place styles inside a container div:

http://jsfiddle.net/LRWWH/211/

HTML

 <div class="input-container">
 <input type="text" class="input-transparent" name="fullname"> 
 </div>

CSS

 .input-container {
    background:red;
    overflow:hidden;
    height: 26px;
    margin-top:3px;        
    padding:6px 10px 0px;
    width: 200px;
  }

 .input-transparent {
    background-color:transparent;
    border:none;
    overflow:hidden;        
    color:#FFFFF;
    width: 200px;
    outline:none;
  }

Solution 5:

There is a css only fix for it

div.search input[type="text"] {
    width: 110px;
    margin: 0;
    background-position: 0px -7px;
    text-indent:0;
    padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
    background-position-x: -16px;
    padding-left: 0px;
    line-height: 2.5em;
}

Thanks Muhammad Atif Chughtai


Post a Comment for "Padding A Text Input In IE... Possible?"