96

How can I change the font size of text inside the textbox in html.

user225269
  • 10,743
  • 69
  • 174
  • 251
  • 1
    In case the purpose is to have the same size as in the outer text, see [Why – Skippy le Grand Gourou May 18 '16 at 15:28

3 Answers3

108

For a <input type='text'> element:

input { font-size: 18px; }

or for a <textarea>:

textarea { font-size: 18px; }

or for a <select>:

select { font-size: 18px; }

you get the drift.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • `select` can render a text box? – Joey Jan 22 '10 at 12:59
  • 1
    Well, I was not sure what the OP exactly means by text box, so I thought I'd add all relevant elements. – Pekka Jan 22 '10 at 13:00
  • Ah, makes sense :-). Side note: You could restrict `` to `text` and `password` types with a selector, too. Won't be liked by older browsers, though. – Joey Jan 22 '10 at 13:01
  • @Johannes and, in all honesty, who cares about old browsers? Even MS made an appeal for people to upgrade from IE6, FF does it automatically, nobody uses Opera :-P, and the rest combined barely scratches statistically... – Paulo Santos Jan 22 '10 at 13:05
  • 4
    @Paulo: IE 6 is still around 10 to 15 percent marketshare. That's a lot more than Opera's two percent. And as a web developer/designer you *should* care. Granted, font size on an input element is a trivial issue and likely not to cause any harm when not working as desired but not caring in general is the wrong thing to do. Locking oneself up in an ivory tower and ignoring reality doesn't make the world any better. It just makes your web sites work worse :-) – Joey Jan 22 '10 at 13:22
23

To actually do it in HTML with inline CSS (not with an external CSS style sheet)

<input type="text" style="font-size: 44pt">

A lot of people would consider putting the style right into the html like this to be poor form. However, I frequently make extreeemly simple web pages for my own use that don't even have a <html> or <body> tag, and such is appropriate there.

Community
  • 1
  • 1
tsbertalan
  • 1,453
  • 1
  • 21
  • 30
4

Here are some ways to edit the text and the size of the box:

rows="insertNumber"
cols="insertNumber"
style="font-size:12pt"

Example:

<textarea rows="5" cols="30" style="font-size: 12pt" id="myText">Enter 
Text Here</textarea>
Stefana Muller
  • 59
  • 4