Form Elements

[Cascading Style Sheets: Contents]
[Previous: Scrollbars]
[This Page: Form Elements]
[Next: ]

This page gives examples of adding style to form elements.

Text and Button

The button below does not look like a regular button :-) It is larger than expected and the text is red. The button has a class, called "button", as shown below:

<input type="button" value="Button" class="button"

The class button, which could have been defined in a stylesheet, is defined in the style tags in the HEAD of the document. The class button is:

input.button{color:red;background-color:pink;font-weight:bolder;font-size:100%}

The class is limited to INPUTs, and the colour is defined as "red", and the background colour is "pink". The "font-weight" is "bolder", and the size is 100%.

The text input below has small, bold text with a pink backgroung:


This input has a style called, "text" and the style is defined in the HEAD of the document as follow:

input.text{color:red;background-color:pink;font-weight:bolder;font-size:10px}

The style is similar to that for the button, but in this case, the "font-size" is defined in pixels (px) instead of percentages.

Textarea

The textarea below, again, looks different from normal. Even its scrollbars are a different colour from those on this page.


The style for the textarea is defined in a different way, partly because using a class for the new scrollbar colours doesn't work. The textarea has the following code:

<textarea name rows="4" cols="25"

style="scrollbar-face-color:'blue';scrollbar-track-color: lightblue;scrollbar-arrow-color: yellow;color:maroon;background-color:yellow;border-style:dotted"></textarea>

The style is defined using "style=" inside the HTML tags. The border-style is also defined as "dotted". The options here are: dotted, dashed, solid, double, groove, ridge, inset, outset. As usual, some of these do not appear to work in any of the major browsers.

Selects

The first select below, is bigger and longer than normal. It has its code within the HTML tag and doesn't use classes.


  The code is

<select name style="color:green;font-size:16px;font-weight:bold; width:300" size="1">

<option value selected>First</option>

<option value>Second</option>

<option value>Third</option>

</select>

The increased text size, to which the select automatically adjusts its height, is achieved by setting the font-size to 16px. The length of the select is determined by "width:300", which makes the select this width irrespective of whether it would normally be shorter, or longer (it adjusts itself according to the text length, unless we specify the width).

The second select below is formatted so its options are different.

The HTML code for the select is as follow:

<select name style="color:green;background-color:pink" size="1">

<option value class="emphasised" selected>Numbers</option>

<option value>-One</option>

<option value>-Two</option>

<option value>-Three</option>

<option value class="spacer">&nbsp;&nbsp;--------------------------</option>

<option value class="emphasised">Letters</option>

<option value>-Ay!</option>

<option value>-Be!</option>

<option value>-See?:-)</option>

</select>

  Firstly, there is some general code which applies to all the items:

<select name style="color:green;background-color:pink" size="1">

That is, normally, the background is pink and the text is green. (The size is HTML and tells the browser how many items in the select to show.)

Some items in the select have a red background, and others have a white background. This is achieved by using classes. So the classes "emphasised" and "spacer" were used. They are defined as below:

option.emphasised {background-color: red; font-weight: bold; font-size: 12px; color: white;}

option.spacer{background-color:white;color:black}

They are both defined as classes for options, so they only work when placed in an option.

Radio Buttons and Checkboxes

Check me!
Click me (nothing happens though)

The coloured square around these buttons is achieved through applying a class and making the background colour "red". The HTML code is:

<form name="formRadioCheckbox" method="post" action enctype="text/plain">

<p><input type="checkbox" name="C1" value class="red" checked>Check me! <br>

<input type="radio" name="c1" value class="red" checked>Click

me (nothing happens though) </p>

</form>

The class "red" is defined in the HEAD of the document as:

.red{background-color:red}