CODEWITHSUNDEEP
htmlinput
fred basset
fred basset

Reputation: 10082

Is it possible to change the size of the text in an HTML input tag?

I have a client who wants bigger text in an <input> box. I would prefer to not have to make custom graphic button for this as it's on a really resource-constrained embedded system.

Upvotes: 2

Views: 221

Answers (4)

ryryan
ryryan

Reputation: 3928

Yep, it is possible and also simple to do!

HTML:

<input type="text" class="example_input" name="example_input" />

And the CSS:

.example_input{
font: Arial, Helvetica, sans-serif 20px bold;
border: 1px black solid; //optional
}

Hope it helped!

EDIT: Example on jsFiddle

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179066

not only should you increase the font-size, you may also have to increase the height and line-height properties if the input element doesn't scale with the text (depending on how your styles were set). Also, be sure to check across all browsers, as forms can be very finicky.

Upvotes: 1

Oded
Oded

Reputation: 499012

Simply specify the font-size you want for the element:

input {
    font-family: tahoma, verdana, sans-serif;
    font-size: 1.1em;
}

I have used a relative size (em), so the ratio will keep if a user has a larger font size defined in the browser.

Upvotes: 1

Andrew Barber
Andrew Barber

Reputation: 40150

The input tag can be styled just like any other element in HTML, including padding, borders, text font face/size, etc.

input{
    font: sans-serif italic 20pt bold;
    border: 2px black solid;
}

Or what ever you would like.

Upvotes: 1

Related Questions