CSS Form effects tutorial

HTML Form effects with CSS

For this tutorial you should already be familiar with HTML forms and the various elements and attributes. You should also have a basic understanding of Cascading Stylesheets (CSS)

The output of this may vary between browsers - These particular examples are compatible with IE5.5+ and NS6. Other browsers such as Opera and IE4 may not display as intended. To check CSS compliance in browsers, try webref, a very useful specification for data formats.

Lets get started!

First of all, create a HTML document with some form elements. Copy this code, or download the files

Textbox 1: <input name="textbox1" type="text" size="20" value="form elements"><br><br>
Textbox 2: <input name="textbox2" type="password" size="15" value="password" class="altTextField"><br><br>
Textbox 3: <input name="textbox3" type="text" size="20" value="css"><br><br>
Textarea 1: <textarea name="textarea1" cols="25" rows="5">textarea</textarea><br>
<input type="checkbox" checked="checked" class="radioStyle"><br>
<input type="radio"><br>
<input type="button" value="other button" class="altButtonFormat">

Then, the CSS selectors and declarations are coded. (In this example, place the following code within the head tag of your page).

TEXTAREA {
background-color: navy;
border: black 2px solid;
color: white;
font-family: arial, verdana, ms sans serif;
font-size: 12pt;
font-weight: normal
}

.altButtonFormat {
background-color: #c0c0c0;
font-family: verdana;
border: #000000 1px solid;
font-size: 12px;
color: #778899
}

.altTextField {
background-color: #ececec;
font-family: verdana;
font-size: 12pt;
color: #09c09c
}

.radioStyle {
background-color: #FF0000;
border: #000000 solid 1px;
font-family: verdana;
font-size: 12px;
color: #000000
}
-->
</style>

Place the above into your <HEAD>..</HEAD> tag within your document. Alternatively, remove the <style type=text/css> and <-- --> and save the remainder as an external css file, linking to it via <link rel="stylesheet" type="text/css" href="stylesheet.css"> - place the css file on the root of the folder where your html documents are.

Fire up your browser and open the page. Below is the output, in Internet Explorer 6. Output may vary but for IE6 and Current versions of Netscape (6.22) and Mozilla (1.0) the output will be as below. Browsers such as Opera 6 and older flavours of Internet Explorer and Netscape Navigator have less support for CSS, and the formatting may not show.

CSS Formatting applied to form objects

Pretty simple huh? There are a great many CSS attributes that can be used to change the appearance of form elements, these are just a few of those. The same colours and border styles can be applied to submit and reset buttons as well as text fields.

As with anything CSS related, the styles can be hard coded within the HTML elements. Using the external CSS file however is much better for consistency, separates formatting from content and helps reduce the amount of code to be written.

Go to: Home | Download tutorial code | CSS Links | Top

Useful links:
webref
gurusnetwork CSS tutorial
designplace CSS tutorial

Remember, if you get stuck or need to ask any questions, register with the forums and tell us about it!

Partners

Advertise here!

Ads

Reseller Web Hosting