CODEWITHSUNDEEP
htmlcss
Irfan Mir
Irfan Mir

Reputation: 2175

How to increase the size of and size of text inside a submit-input?

Someone told me that I should be using <button>s, but I was taught that should only be used when you have a multi-line submit-button; otherwise, use <input type="submit" />.

So I have these submit-input for some of the letters in the alphabet, but they are so small and the text inside them is so small.

I tried to increase their height and width, but that doesn't seem to do anything. Padding increase doesn't help and irrational font-sizes (46000%) only make it >5px bigger.

How can I increase the size of these inputs and the text inside them?

<input class="letter" id="a" type="submit" value="a" />
<input class="letter" id="c" type="submit" value="c" />
<input class="letter" id="e" type="submit" value="e" />
<input class="letter" id="f" type="submit" value="f" />
<input class="letter" id="g" type="submit" value="g" />
<input class="letter" id="h" type="submit" value="h" />
<input class="letter" id="i" type="submit" value="i" />
<input class="letter" id="k" type="submit" value="k" />
<input class="letter" id="l" type="submit" value="l" />
<input class="letter" id="m" type="submit" value="m" />
<input class="letter" id="n" type="submit" value="n" />
<input class="letter" id="o" type="submit" value="o" />
<input class="letter" id="p" type="submit" value="p" />
<input class="letter" id="r" type="submit" value="r" />
<input class="letter" id="s" type="submit" value="s" />
<input class="letter" id="t" type="submit" value="t" />

I currently have no CSS applied to them. A HTML5 reset / normalize.css might be affecting them.

Upvotes: 0

Views: 12997

Answers (5)

Aneel Goplani
Aneel Goplani

Reputation: 77

You can write it inside the input button.    
style="font-weight: bold;font-size:20pt;"

By: Aneel Goplani. B.SC. CIS. 2002. USA.

Upvotes: 0

lukeocom
lukeocom

Reputation: 3243

You can adjust the size of inputs by setting the width and height in your css, or let it resize automatically by only setting the font size. To keep sizes consistent across the buttons you can set min-heights and widths.

In your css:

input{
    font-size:36pt;
    min-width:65px;min-height:65px;
}

An example is here - http://jsfiddle.net/FfkaV/3

Upvotes: -1

Tushar Trivedi
Tushar Trivedi

Reputation: 400

Try :: .letter{width:150px}

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

At http://the-irf.com/dev/ (the address of the page, disclosed in a comment), there is an apparent attempt at increasing font size with the following CSS code:

    .hint input{
        color:#333333;
        color:rgb(51, 51, 51);
        cursor:pointer;
        font-size:161.8%;
        font-size:1.618rem;
    }

It has no effect, however, since the page does not have any class attribute that assigns the class hint to any element.

There is the attribute id="hint", and changing the selector .hint to #hint makes the buttons bigger.

Upvotes: 1

roybalderama
roybalderama

Reputation: 1640

Try these, either way will do:

1st way:

With your HTML:

<input id="a" type="submit" value="a" />

With your CSS:

input[type=submit]
{
    /* your styles here, You can just increase its font size below*/
    font-size: 10px; 
    font-weight: bold;
    font-family: ariel; 
    background-color: #ffedca;
}

2nd Option

With your HTML:

<input class="letter" id="a" type="submit" value="a" />

With your CSS:

.letter
{
    /* your styles here, You can just increase its font size below*/
    font-size: 10px; 
    font-weight: bold;
    font-family: ariel; 
    background-color: #ffedca;
}

Upvotes: 1

Related Questions