[html] Change size of text in text input tag?

I have a large input box for text but I can't change the font size?

<input type="text">

I would like to change the font size inside the text field but I can't seem to do it using CSS. Any help?

Change your code into

<input class="my-style" type="text" />

CSS:

.my-style {
  font-size:25px;
}

I would say to set up the font size change in your CSS stylesheet file.

I'm pretty sure that you want all text at the same size for all your form fields. Adding inline styles in your HTML will add to many lines at the end... plus you would need to add it to the other types of form fields such as <select>.

HTML:

<div id="cForm">
    <form method="post">
        <input type="text" name="name" placeholder="Name" data-required="true">
        <option value="" selected="selected" >Choose Category...</option>
    </form>
</div>

CSS:

input, select {
    font-size: 18px;
}

To change the font size of the <input /> tag in HTML, use this:

<input style="font-size:20px" type="text" value="" />

It will create a text input box and the text inside the text box will be 20 pixels.

In your CSS stylesheet, try adding:

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

See this jsFiddle example

This works, too.

<input style="width:300px; height:55px; font-size:50px;" />

A CSS stylesheet looks better though, and can easily be used over multiple pages.

The Javascript to change font size for an input control is:

input.style.fontSize = "16px";