Form fonts

[Dennis Allen]

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

[Fred Oz]

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

[Michael Winter]

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.

[Dennis Allen]

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.