CODEWITHSUNDEEP
csshtmlinput
Sowmya
Sowmya

Reputation: 26989

Input placeholder tag in html

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" />

Upvotes: 1

Views: 2582

Answers (3)

Xella
Xella

Reputation: 1268

Using css3 property box-sizing you can redefine what width means to include the external padding and border(not margin).

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

Unfortunately because it's CSS3, this property don't support by all IE (IE6 and IE7 don't support). You can read more about it here: w3schools

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201818

Make it 98% instead of 100%. If you set the width to 100%, it means the content width, and the total width occupied by the element is that 100% plus twice the border width plus twice the padding. The value of 98% is of course just a guess, but usually good enough.

There are other, better approaches. For usability, the visible width should reflect the width of expected normal input, so it should sufficient to set the width attribute in HTML to a suitable number. (The value depends on what kinds of numbers you expect; international telephone numbers can be rather long.)

Upvotes: 0

sandeep
sandeep

Reputation: 92843

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.

Upvotes: 0

Related Questions