How to change the font and font size of an HTML input tag?

HtmlCss

Html Problem Overview


<input id="txtComputer">

How do I make my text inside the input tag bigger? I want to make it 24 size font. It would also be good if I can change the font from the default

Html Solutions


Solution 1 - Html

<input type ="text" id="txtComputer">

css

input[type="text"]
{
    font-size:24px;
}

Solution 2 - Html

In your 'head' section, add this code:

<style>
input[type='text'] { font-size: 24px; }
</style>

Or you can only add the:

input[type='text'] { font-size: 24px; }

to a CSS file which can later be included.

You can also change the font face by using the CSS property: font-family

font-family: monospace;

So you can have a CSS code like this:

input[type='text'] { font-size: 24px; font-family: monospace; }

You can find further help at the W3Schools website.

I suggest you to have a look at the CSS3 specification. With CSS3 you can also load a font from the web instead of having the limitation to use only the most common fonts or tell the user to download the font you're using.

Solution 3 - Html

in your css :

 #txtComputer {
      font-size: 24px;
 }

You can style an input entirely (background, color, etc.) and even use the hover event.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCocoa DevView Question on Stackoverflow
Solution 1 - HtmltmjamView Answer on Stackoverflow
Solution 2 - HtmlmoongoalView Answer on Stackoverflow
Solution 3 - HtmlCAPView Answer on Stackoverflow