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

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!

Answer 1

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 <style> tag
#textboxid
{
height:200px;
font-size:14pt;
}
<!--in your HTML-->
<input id="textboxid" ...>
Or
<input style="height:200px;font-size:14pt;" .....>

Answer 2

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. <textarea rows="2" cols="25"></textarea>).
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 <input> tags as well.
<textarea rows="2" cols="25" placeholder="This is the default text"></textarea>
This text will disappear when the user enters information rather than when they click, but that is common functionality for this kind of thing.

Answer 3

This will do it:
#signin input {
background-color:#FFF;
min-height:200px;
}

Answer 4

Try this:
#signin input {
background-color:#FFF;
height: 1.5em;
/* or */
line-height: 1.5em;
}

Answer 5

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;
}

Answer 6

.textbox {
height: 40px;
}
<div id=signin>
<input type="text" class="textbox" size="25%" height="50"/></br>
<input type="text" class="textbox" size="25%" height="50"/>
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