How do I set the size of an HTML text box

Question

User · Answer

Your textbox code    lt input type  text  class  textboxclass    gt    Your CSS code   input type  text     height  10px  width  80px      or   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

User · Answer

This works for me in IE 10 and FF 23   lt input type  text  size  100    gt

User · Answer

input type  text         width 200px

User · Answer

Try this code    input type  text     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

User · Answer

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   lt div class  quot form quot  gt       lt textarea name  quot message quot  rows  quot 10 quot  cols  quot 30 quot   gt Describe your project in detail  lt  textarea gt   lt  div gt   Now CSS code will be like   form textarea       height  220px      width  342px     Problem solved

User · Answer

You can make the dependent input width versus container width    container      width  360px      container input      width  100

User · Answer

Just use   textarea       width  200px      or  input type  text         width  200px      Depending on what you mean by  textbox

User · Answer

Your markup    lt input type  text  class  resizedTextbox    gt    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  lt input   gt  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

User · Answer

Elements can be sized with the height and width attributes

User · Answer

Lookout  The width attribute is clipped by the max-width attribute  So I used           lt form method  post  style  width 1200px  gt       lt h4 style  width 1200px  gt URI  lt input type  text  name  srcURI  id  srcURI  value   m SrcURI  style  width 600px max-width 600px   gt  lt  h4 gt

User · Answer

Try   input type  text    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

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

Examples related to css