99

Here is an HTML input text box:

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

What are the options to define the size of the box?

How can this be implemented in CSS?

Alex Willison
  • 257
  • 7
  • 20
osos
  • 2,103
  • 5
  • 28
  • 42

5 Answers5

136

You could set its width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

or even better define a class:

<input type="text" id="text" name="text_name" class="mytext" />

and in a separate CSS file apply the necessary styling:

.mytext {
    width: 300px;
}

If you want to limit the number of characters that the user can type into this textbox you could use the maxlength attribute:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • 11
    also: you can change the width in terms of "em" (and not "px") and then the size is proportional to the font-size of the text box – Alexander Bird Mar 15 '12 at 19:30
49

The size attribute works, as well

<input size="25" type="text">
Salim Djerbouh
  • 10,719
  • 6
  • 29
  • 61
Fuzzy Analysis
  • 3,168
  • 2
  • 42
  • 66
  • 1
    In what units is this size attribute measured normally? – Thomas Kimber Nov 02 '20 at 17:05
  • 1
    If the input is type "text" or "password" then the size refers to the number of characters. You can control the width of the input that way. See [Mozilla docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size) – user2212873 Feb 22 '21 at 22:22
9

Try this

<input type="text" style="font-size:18pt;height:420px;width:200px;">

Or else 

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

with the css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }
Wolf5
  • 16,600
  • 12
  • 59
  • 58
Janarthanan Ramu
  • 1,331
  • 16
  • 17
  • 3
    Your answer adds nothing new and you should specify units (px, pt, % v, etc) in css – Jon P Sep 09 '15 at 06:09
  • 1
    Well- The font-size (style="font-size:18pt") was the one I was looking for and that also increases the size of the box. Though not explicitly asked by the OP, it also adds value. – Wolf5 Oct 15 '15 at 15:35
  • This worked. Hence thanks a lot. However the text seems to center itself vertically. Can I prevent this in any way? – Aaron John Sabu Nov 24 '18 at 13:17
  • @AaronJohnSabu Sorry for delay.. Try increasing the width size.. hope you already found answer.. – Janarthanan Ramu Mar 11 '19 at 10:37
3

You can set the width in pixels via inline styling:

<input type="text" name="text" style="width: 195px;">

You can also set the width with a visible character length:

<input type="text" name="text" size="35">
Salim Djerbouh
  • 10,719
  • 6
  • 29
  • 61
betrice mpalanzi
  • 1,436
  • 12
  • 16
-2
<input size="45" type="text" name="name">

The "size" specifies the visible width in characters of the element input.

You can also use the height and width from css.

<input type="text" name="name" style="height:100px; width:300px;">
Daniel dos Santos
  • 241
  • 4
  • 10
  • 25