Question

I have given 100% width to input box to fix to the browser width but when i add placeholder, the input box is going out of the browser width and horizontal scroll bar is coming.
I don’t want scroll bar to occur. Any idea??

here is my input tag

 <input type="tel" tabindex="9" maxlength="12" placeholder="XXX-XXX-XXXX" value="" name="mobileNumber" />

Answer 1

You can use box-sizing:border-box property for this.Write like this:

input{
    width:100%;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

Check this http://jsfiddle.net/9rprY/ .

But it’s not work in IE7 & below.