How do I make the text box bigger in HTML CSS

Question

I am not sure where you edit the code for my question so I put both  sorry if that confuses anyone   In the top right hand corner there are two text boxes  but I m not sure how to make them bigger in height  Please could you help me   Here is the link to my site so far  http   jsfiddle net xiiJaMiiE 4UUgg 1 embedded result    signin    position absolute  min-width 22   height 20   top 0   right 0   z-index 10  background-color  CCC  border  1px solid grey      signin input   background-color  FFF       Sorry to be a pain  but also how do I add text into it  but when the user clicks in the box is disappears  Thanks for your help

User · Answer

This will do it    signin input    background-color  FFF   min-height 200px

User · Answer

textbox       height  40px      lt div id signin gt         lt input type  text  class  textbox  size  25   height  50   gt  lt  br gt   lt input type  text  class  textbox  size  25   height  50   gt    Make the font size larger and add height  or line height to the input boxes  I would not recommend adding those size and height attributes in the HTML as that can be handled by CSS  I have made a class text-box that can be used for multiple input boxes

User · Answer

there are many options that would change the height of an input box  padding  font-size  height would all do this  different combinations of these produce taller input boxes with different styles  I suggest just changing the font-size  and font-family for looks  and add some padding to make it even taller and also more appealing  I will give you an example of all three  style though    signin input   font-size 20px      OR   signin input   padding 10px      OR   signin input   height 24px      This is the combination of the three that I recommend    signin input   font-size 20px font-family   HelveticaNeue-Light    Helvetica Neue Light    Helvetica Neue   Helvetica  Arial   Lucida Grande   sans-serif  font-weight  300  padding 10px

User · Answer

According to this answer  here is what it says   In Javascript  you can manipulate DOM CSS properties  for example   document getElementById  textboxid   style height  200px   document getElementById  textboxid   style fontSize  14pt     If you simply want to specify the height and font size  use CSS or style attributes  e g     in your CSS file or  lt style gt  tag  textboxid       height 200px      font-size 14pt      lt  --in your HTML-- gt   lt input id  textboxid      gt    Or   lt input style  height 200px font-size 14pt         gt

User · Answer

If you want to make them a lot bigger  like for multiple lines of input  you may want to use a textarea tag instead of the input tag   This allows you to put in number of rows and columns you want on your textarea without messing with css  e g   lt textarea rows  2  cols  25  gt  lt  textarea gt     Text areas are resizable by default   If you want to disable that  just use the resize css rule    signin textarea       resize  none      A simple solution to your question about default text that disappears when the user clicks is to use the placeholder attribute   This will work for  lt input gt  tags as well    lt textarea rows  2  cols  25  placeholder  This is the default text  gt  lt  textarea gt    This text will disappear when the user enters information rather than when they click  but that is common functionality for this kind of thing

User · Answer

Try this    signin input       background-color  FFF      height  1 5em         or        line-height  1 5em

[html] How do I make the text box bigger in HTML/CSS?

Examples related to html

Examples related to css