How to define textbox size using css

Question

How to define textbox size using css.

Answer 1

Just use:

textarea {
width: 200px;
}

or

input {
width: 200px;
}

Depending on what you mean by 'textbox'.

Answer 2

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. For even more consistency across browsers, you should also define the border yourself.

Answer 3

This is a very, very basic principle of CSS: elements can be sized with the height and width attributes.

Why are you trying to use CSS if you don't even know this much? Try working through the W3Schools CSS tutorial before asking any more questions.