I am building a page where I want to add a HUGE text entry box. Just like this:
http://unbouncepages.com/real-time-texts/
I have done normal text fields before, but how do I get the box and font size to be massive?
+2
A:
html:
<input type='text' id='my-text-box' value="Default text" />
css:
#my-text-box {
font-weight: bold;
font-size: 18px; /* or larger */
height: 2em; /* or larger */
width: 400px; /* or larger */
}
Jiaaro
2010-09-14 18:53:48
@meagar: I think the question was asking for a single-line text box, despite its wording.
Paul D. Waite
2010-09-14 19:00:00
@meagar, @Paul seems correct, looking at the linked page in the question.
David Thomas
2010-09-14 19:19:16
oops yeah I realized he meant an input mid-answer but forgot update my closing tag
Jiaaro
2010-09-14 19:19:32
@Paul @David I meant he was literally mixing them. He had `<input ...</textarea>`.
meagar
2010-09-14 19:27:23
@meagar...*aaaaah* that does make more sense *+1* =)
David Thomas
2010-09-14 19:49:23
@Meagar: doh, sorry, with you.
Paul D. Waite
2010-09-14 21:34:45
+3
A:
Try these CSS-Settings:
#myLargeTextboxId {
font-size:33px;
height:33px;
left:0;
line-height:33px;
padding:8px 8px 7px;
top:0;
width:224px;
}
hacksteak25
2010-09-14 18:55:45
A:
I inspected the element and it shows this:
<input name="phone_number" class="text" id="phone_number" style="padding-bottom: 7px; line-height: 33px; padding-left: 8px; width: 224px; padding-right: 8px; height: 33px; font-size: 33px; top: 0px; padding-top: 8px; left: 0px;" type="text"/>
Larry Flewwelling
2010-09-14 18:58:09
+1
A:
Simply upping the font-size should do it, but you probably want some padding in there as well. A massive font with no padding would look quite silly.
FireBug is your friend. Use it on everything you have never seen before and learn.
dmackerman
2010-09-14 19:52:34