CODEWITHSUNDEEP
htmlcss
Dragan Marjanovic
Dragan Marjanovic

Reputation: 1287

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?

Upvotes: 32

Views: 170665

Answers (7)

Radovancev
Radovancev

Reputation: 306

Change your code into 

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

CSS:

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

Upvotes: 0

Jim D
Jim D

Reputation: 41

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.

Upvotes: 2

S.Nirmala Josphine
S.Nirmala Josphine

Reputation: 9

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.

Upvotes: 0

Robert Barros
Robert Barros

Reputation: 71

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;
}

Upvotes: 2

nullpotent
nullpotent

Reputation: 9260

<input style="font-size:25px;" type="text"/>

The above code changes the font size to 25 pixels.

Upvotes: 49

jacktheripper
jacktheripper

Reputation: 14219

In your CSS stylesheet, try adding:

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

See this jsFiddle example

Upvotes: 25

Aaron
Aaron

Reputation: 214

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

input.style.fontSize = "16px";

Upvotes: 1

Related Questions