Home How do I set the size of an HTML text box?
Reply: 11

How do I set the size of an HTML text box?

user225269 Published in 2010-01-24 01:24:04Z

How do I set the size of an HTML text box?

Rowno Reply to 2012-12-06 22:42:08Z

Just use:

textarea {
    width: 200px;


input[type="text"] {
    width: 200px;

Depending on what you mean by 'textbox'.

Dan Herbert
Dan Herbert Reply to 2011-09-15 20:55:34Z

Your markup:

<input type="text" class="resizedTextbox" />

The CSS:

.resizedTextbox {width: 100px; height: 20px}

Keep in mind that text box size is a "victim" of the W3C box model. What I mean by victim is that the height and width of a text box is the sum of the height/width properties assigned above, in addition to the padding height/width, and the border width. For this reason, your text boxes will be slightly different sizes in different browsers depending on the default padding in different browsers. Although different browsers tend to define different padding to text boxes, most reset style sheets don't tend to include <input /> tags in their reset sheets, so this is something to keep in mind.

You can standardize this by defining your own padding. Here is your CSS with specified padding, so the text box looks the same in all browsers:

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

I added 1 pixel padding because some browsers tend to make the text box look too crammed if the padding is 0px. Depending on your design, you may want to add even more padding, but it is highly recommend you define the padding yourself, otherwise you'll be leaving it up to different browsers to decide for themselves. For even more consistency across browsers, you should also define the border yourself.

animuson Reply to 2012-02-27 08:19:09Z
Lightsaber Reply to 2013-07-05 19:02:39Z

Your textbox code:

<input type="text" class="textboxclass" />

Your CSS code:

input[type="text"] {
height: 10px;
width: 80px;


.textboxclass {
height: 10px;
width: 80px;

So, first you select your element with attributes (look at first example) or classes(look last example). Later, you assign height and width values to your element.

joym8 Reply to 2013-09-30 19:44:36Z

This works for me in IE 10 and FF 23

<input type="text" size="100" />
Johnny Vikrant
Johnny Vikrant Reply to 2015-06-18 09:58:51Z

If you don't want to use the class method you can use parent-child method to make changes in the text box.

For eg. I've made a form in my form div.

HTML Code:

<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>

Now CSS code will be like:

.form textarea{
    height: 220px;
    width: 342px; 

Problem solved.

Erol Balci
Erol Balci Reply to 2013-02-08 03:28:32Z


padding:10px 0;}

This is way it remains independent of what textsize has been set for the textbox. You are increasing the height using padding instead

brenjt Reply to 2013-03-15 05:53:32Z

Try this code :

 padding:10px 0;}

This way it remains independent of what textsize has been set for the textbox. You are increasing the height using padding instead.

Matchu Reply to 2013-07-05 18:54:05Z

Elements can be sized with the height and width attributes.

R Keene
R Keene Reply to 2016-05-20 18:56:23Z

Lookout! The width attribute is clipped by the max-width attribute. So I used....

    <form method="post" style="width:1200px">
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4>
Nivedhya Reply to 2017-11-24 04:46:24Z

If you want to limit the no: of letters in textbox use this: maxlength ="10" inside input tag

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.47677 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO