Page 1 of 3 In this tutorial, we will look at some valid, and some not so valid, CSS that we can use to style our form elements, or anything else for that matter. We'll see if we can get a little inventive and look at one or two proprietary CSS techniques that are made available to us for use with Gecko browsers. All the files are available in the download section at the foot of this page, you can use them as a reference, or code along as we go. The previous ten tutorials in this series can be found using the links below:
Remember, all the CSS in this tutorial series is shown without the style tags, and should be placed in the head of your page. Just above the closing </head> tag would be ideal for our purposes. In a "production" page you should be placing your CSS in an external style sheet.
<style type="text/css">
<!--
Our CSS sits in here
-->
</style>
Let's begin by making the textfield, as shown in Image 1.
Image 1: Presenting a textfield a little differently
Neat! That looks a little different from the norm, and it is very easily achieved. Let's take a look at the CSS that defined our textfield so that it looked like that.
#bottomline{
background-color:#FFFFFF;
border-bottom: 1px solid #000;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
Listing 1: Setting a text field to show as an underline
As you can see, nothing untoward or dramatically fancy going on there. We have simply hidden the top, left and right sides of the text field by making the border white in colour to match the background, and added what looks like an underline by showing the bottom border with a value of #000 - black.
The key is giving the text field an id value so we can target it on an individual basis. Let's look at the html for our form:
<form name="bline" id="bline" method="post" action="">
<input type="text" name ="bottomline" id="bottomline" />
<input type="submit" name="Submit" value="Submit" />
</form>
Listing 2: The html for our form
You can see the id of the text field is bottomline and it is this id that I have targeted from the CSS. This can be seen on the first line of Listing 1. This allows us - as we have learned in earlier articles - to target our element, and define its appearance as we wish.
Try experimenting with the property values to see how else you can change the appearance of our bottomline element. Change the values for the vertical edges, or make the text sit between tram lines by making the top border a match to the bottom border, as shown in Image 2.
Image 2: Adding a top border to the text field
Try out using different colours for the borders and the background colour, try changing the text color also, you'll soon have some killer looking forms happening on your site!
Keywords
moz, CSS, styling, form, elements, radius, gradient
