By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,672 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

Form fonts

P: n/a
Hi. Does anyone know how to control the fonts of a form <input type="text"> or <input type="submit">? I'd like to reduce the size of a couple form inputs. Tried surrounding them with <font size="-1">' .. </font>, but nothing happens. Any advice would be appreciated...Dennis
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Dennis Allen wrote:
Hi. Does anyone know how to control the fonts of a form <input type="text"> or <input type="submit">? I'd like to reduce the size of a couple form inputs. Tried surrounding them with <font size="-1">' .. </font>, but nothing happens. Any advice would be appreciated...Dennis


This has nothing at all to do with JavaScript, you should be trying:

comp.infosystems.www.authoring.stylesheets

but since we're here...

<style type="text/css">
input {font-size: 100%;}
.fs80 {font-size: 80%;}
</style>

The first rule will make all input text 100%. The second will make the
font of any element with class="fs80" 80% of whatever is the default.

To see the result, put above in the head and this in the body:

<form action="">
<input type="text" value="Plain style"><br>
<input type="text" value="aClass style" class="fs80">
</form>

--
Fred
Jul 23 '05 #2

P: n/a
On Tue, 11 Jan 2005 18:44:05 +1000, Fred Oz <oz****@iinet.net.auau> wrote:

[snip]
<style type="text/css">
input {font-size: 100%;}
.fs80 {font-size: 80%;}
</style>

The first rule will make all input text 100%. The second will make the
font of any element with class="fs80" 80% of whatever is the default.


The second sentence is inaccurate. The 80% will be calculated from the
computed value inherited from parent values. For example, consider:

body,
.normal {
font-size: 100%;
}
.bigger {
font-size: 150%;
}

<div class="normal">
<p class="normal">Normal parent, normal paragraph</p>
<p class="bigger">Normal parent, bigger paragraph</p>
</div>
<div class="bigger">
<p class="normal">Bigger parent, normal paragraph</p>
<p class="bigger">Bigger parent, bigger paragraph</p>
</div>

The BODY element will have a font size that matches the browser settings.

The first paragraph will have a font size that is the same as the parent
DIV, and that DIV will have a font size that is the same as the BODY
element (overall, the same as the default).

The second paragraph will have a font size that is 1.5 times larger than
the parent DIV, and that DIV will have a font size that is the same as the
BODY element (overall, 1.5 times larger than the default).

The third paragraph will have a font size that is the same as the parent
DIV, and that DIV will have a font size that is 1.5 times larger than the
BODY element (overall, 1.5 times larger than the default).

The fourth paragraph will have a font size that is 1.5 times larger than
the parent DIV, and that DIV will have a font size that is 1.5 times
larger than the BODY element (overall, 2.25 times larger than the default).

[snip]

Mike
Note: All of the class names displayed in this post are poor choices.
Class names should be meaningful, reflecting the purpose, rather than the
result, of applying the class.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

P: n/a
Thanks...Dennis

"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message news:opskfrkrfhx13kvk@atlantis...
On Tue, 11 Jan 2005 18:44:05 +1000, Fred Oz <oz****@iinet.net.auau> wrote:

[snip]
<style type="text/css">
input {font-size: 100%;}
.fs80 {font-size: 80%;}
</style>

The first rule will make all input text 100%. The second will make the
font of any element with class="fs80" 80% of whatever is the default.


The second sentence is inaccurate. The 80% will be calculated from the
computed value inherited from parent values. For example, consider:

body,
.normal {
font-size: 100%;
}
.bigger {
font-size: 150%;
}

<div class="normal">
<p class="normal">Normal parent, normal paragraph</p>
<p class="bigger">Normal parent, bigger paragraph</p>
</div>
<div class="bigger">
<p class="normal">Bigger parent, normal paragraph</p>
<p class="bigger">Bigger parent, bigger paragraph</p>
</div>

The BODY element will have a font size that matches the browser settings.

The first paragraph will have a font size that is the same as the parent
DIV, and that DIV will have a font size that is the same as the BODY
element (overall, the same as the default).

The second paragraph will have a font size that is 1.5 times larger than
the parent DIV, and that DIV will have a font size that is the same as the
BODY element (overall, 1.5 times larger than the default).

The third paragraph will have a font size that is the same as the parent
DIV, and that DIV will have a font size that is 1.5 times larger than the
BODY element (overall, 1.5 times larger than the default).

The fourth paragraph will have a font size that is 1.5 times larger than
the parent DIV, and that DIV will have a font size that is 1.5 times
larger than the BODY element (overall, 2.25 times larger than the default).

[snip]

Mike


Note: All of the class names displayed in this post are poor choices.
Class names should be meaningful, reflecting the purpose, rather than the
result, of applying the class.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.