You are here: irt.org | FAQ | JavaScript | Form | 1 | Q30 [ previous next ]
Only in Netscape 4, with the aid of style sheets:
<head>
<style>
<!--
p.small {font-size: 8pt; color: #000000; font-family: Arial;}
p.medium {font-size: 12pt; color: #000000; font-family: Arial;}
p.large {font-size: 18pt; color: #000000; font-family: Arial;}
input {color: #000000;}
-->
</style>
</head>
<body>
<form>
<p class="small">Small text: <input type="text" value="abc123">
<p class="small"><input type="button" value="123abc">
<p class="medium">Medium text: <input type="text" value="abc123">
<p class="medium"><input type="button" value="123abc">
<p class="large">Large text: <input type="text" value="abc123">
<p class="large"><input type="button" value="123abc">
</form>
</body>The following was submitted by Bill Wilkinson:
The existing answer is correct for Netscape, but there is at least one alternative way to do the equivalent (and, actually, a bit better!) in Internet Explorer 4.x and above.
Where, in Netscape, you can do:
<style>
all.small {font-size: 8pt; color: #FF0000; font-family: Arial;}
</style>
...
<p class="small">Small text: <input type="text" value="abc123">to display both the ordinary text "Small text:" *and* the text in the input form field, in Internet Explorer you must do:
<style>
all.small {font-size: 8pt; color: #FF0000; font-family: Arial;}
</style>
...
<p class="small">Small text:
<input type="text" class=small value="abc123">Since the <p ...> affects only the non-form-field text.
Netscape ignores the class declaration in the form field, so using it both places, as shown just above, produces reasonably consistent results in both browsers.
*HOWEVER* One thing that Internet Explorer does that Netscape does not do is pay attention to "background:" and "color:" specifications when displaying text in an INPUT form field. In the excerpts above, both Internet Explorer and Netscape will display the form field characters in 8-point Arial, but only Internet Explorer will display them as *red* (color: #FF0000) as well!
This can be especially handy if you would like a "reverse video" input field: You simply use:
<style> background:black; color:white; </style>
in your style and you are done. I'm not sure why Netscape chose to implement most of the style elements in form input elements but elected to ignore colors. Truly too bad.
Randy Schmieder writes:
I noticed that textarea (NOT input type="text") really varies with CSS in netscape vs Internet Explorer. Both Netscape Navigator 4+ and Internet Explorer 5 work well with all form elements, with the exception of TEXTAREA. However, Netscape Navigator refuses to allow me to alter the font SIZE or face, unless I specify the FORM element as a class. Weird. Take a look at the following in the 2 browsers...
Try first <form class="littleForm">, then just <form>:
<html>
<head>
<title></title>
</head>
<body>
<style>
.LittleForm{font-family: verdana, courier new, courier, sans-serif; font-size:10px;color:#000000;font-weight:normal;background-color:#ffffff;}
</style>
</head>
<body>
look at this in Netscape Navigator and Internet Explorer
<form class="littleForm">
<p.LittleForm>
<input class="littleForm" type="edit" value="Edit input" name="Edit"><br>
<input class="littleForm" type="text" value="Text input" name="Text"><br>
<input class="littleForm" type="password" value="Password input" name="Password" size="13"><br>
<input class="littleForm" style="background-color:#cccccc;" Type="button" name="Button" value="Button needs to have the BG as grey (Netscape Navigator can't do the color), but is otherwise OK"><br>
<textarea class="littleForm" name="textarea" rows="6" cols="15" wrap="virtual">TEXTAREA: this is HUGE in Netscape Navigator</textarea><br>
</form>
</body>