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!

score 30 · Accepted Answer · edited May 23 '17 at 11:54

30

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;" .....>

edited May 23 '17 at 11:54

Community

1
1

answered Feb 02 '14 at 02:24

Dozer789

1,980
2
23
43

1

@xiiJaMiiE Remember, it it helped, upvote and accept! Glad I could help! – Dozer789 Feb 02 '14 at 02:30
1

No problem! Is there a way I could add text in there, like Username, then when a user clicks on it, it disappears? @Dozer789 – xiiJaMiiE Feb 02 '14 at 02:47

score 18 · Answer 2 · answered May 13 '16 at 15:59

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.

I feel that this should be the answer instead. – Malcolm Salvador May 10 '17 at 01:06 — Malcolm Salvador, May 10 '17 at 01:06

score 3 · Answer 3 · answered Feb 02 '14 at 02:24

3

This will do it:

#signin input {
 background-color:#FFF;
 min-height:200px;

}

answered Feb 02 '14 at 02:24

krowe

2,129
17
19

score 3 · Answer 4 · answered Feb 02 '14 at 02:24

3

Try this:

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

answered Feb 02 '14 at 02:24

Will

4,075
1
17
28

score 2 · Answer 5 · answered Feb 02 '14 at 02:55

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

score 1 · Answer 6 · answered Feb 02 '14 at 02:29

1

.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

answered Feb 02 '14 at 02:29

Chou One

627
1
13
21

Size is in characters, not a percentage, and height is only valid for type="image" (see http://www.w3schools.com/tags/tag_input.asp). – damjan Feb 02 '15 at 14:47

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

6 Answers6