Web Development optimize

Get your fieldset style on

Ryan Boudreaux demonstrates how to jazz up the fieldset element with CSS3 styling.

The HTML fieldset <fieldset> element is nothing new, but in this piece I am going to show you how to use some CSS3 styling to give your form fieldset elements a new look, a makeover if you will! We will add a border, a border radius, background gradient, padding, display block, define several fonts, and add styles for the legend. The focus of this demonstration is the styling of the fieldset within a form, as such; form validation or form submission is not within the scope of this particular piece.

We will start with a fairly generic form <form> with fieldset <fieldset>, label <label>, and legend <legend> in the HTML code snippet displayed below:

  <hgroup>
    <h1>Fieldset Demonstration</h1>
  </hgroup>
  <form>
    <fieldset>
     <legend>Your Personal Information!</legend>
     <label>Name:</label> <input type="text" name="Name"></input><br />
     <label>Address:</label> <input type="text" name="Address"></input><br />
     <label>City:</label> <input type="text" name="City"> </input><label>State:</label> <input type="text" name="State" maxlength="2" size="2"></input> <label>Zip Code:</label> <input type="text" name="Zip" maxlength="5" size="5"></input><br />
     <label>Email:</label> <input type="text"></input><br />
     <label>Date of birth:</label> <input type="text"></input>
    </fieldset>
  </form>
The demonstration index.html viewed in Google Chrome Version 22.0.1229.94 m is displayed in Figure A below with no styling:

Figure A

Now, let's begin adding some styles to our demonstration by adding font style to the heading with a font-family of Trebuchet MS, Ariel, Helvetica, sans-serif with a font-weight of 700, and a font style of italic. The form is set to a width of 460px with a float left; the border is styled at 2 pixels wide with a solid blue color and a border radius of 10 pixels along with a box shadow with a horizontal and vertical spread of 4 pixels; a blur of 5 pixels; and an RGBa color setting of 50, 50, 50, .75. The vendor prefixes for webkit and moz are included for the border radius and box shadow styles. The CSS code snippet is displayed below along with the refreshed screen capture as displayed in Chrome Version 22.0.1229.94 m in Figure B:
h1 {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight:700;
  font-style:italic;
}
.form {
  width:450px;
  float: left;
}
.border {
  border: 2px solid #009;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
  box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
}

Figure B

Now, let's tidy up our labels, text input fields, and legend by including a font-family of Veranda, Geneva, and sans-serif, and a font size of .9em. We will also add a styling to for the label <label> tag elements with a display block along a left margin of 3 pixels, a top padding of 2 pixels, and a text shadow effect. Also, we will add an inline block display for the "State" and "Zip Code". The modified HTML and CSS code snippets are below with the resulting refreshed screen capture as displayed in Chrome Version 22.0.1229.94 m in Figure C:

HTML
<label class="inline">State:</label> <input type="text" name="State" maxlength="2" size="2"></input> <label class="inline">Zip Code:</label> <input type="text" name="Zip" maxlength="5" size="5"></input>
CSS
Label, legend {
  display: block;
  margin-left: 3px;
  padding-top: 2px;
  text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75);
  font-family:Verdana, Geneva, sans-serif;
  font-size:.9em;
}
.inline {
  display:inline-block;
}
Figure C

Now, let's add in a gradient background to the fieldset by adding the CSS3 code into the "border" class with the following code snippet, including vendor prefixes for webkit, moz, o, and ms, and the resulting refreshed screen capture as displayed in Figure D below:
  background: rgb(30, 50, 230);
  background: -moz-linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);
  background: -webkit-linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);
  background: -o-linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);
  background: -ms-linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);
  background: linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);
Figure D

As you can see we need to modify the style for the legend <legend> and label <label> elements so that they stand out more with the background gradient. So, I will move the legend <legend> into its own style property, keeping the text shadow and font family, and then editing the font size to 1.4em. I'll add a 2px border left, top, and right with the same color as the fieldset border, a border radius of 10px, a box shadow effect, and finish with a padding of 3 pixels. The modified CSS code snippet along with CSS3 vendor prefixes, and the refreshed display are shown in Figure E:
label {
  display: block;
  margin-left: 3px;
  padding-top: 2px;
  text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75);
  font-family:Verdana, Geneva, sans-serif;
  font-size:.9em;
}
legend {
  text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75);
  font-family:Verdana, Geneva, sans-serif;
  font-size:1.4em;
  border-top: 2px solid #009;
  border-left: 2px solid #009;
  border-right:  2px solid #009;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
  box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
  padding: 3px;
}

Figure E

Next, I want to add a background and a background gradient to the legend <legend> so, let's just make a copy of the background and background gradient styles that we defined for the fieldset <fieldset> and paste it into the legend property styles. The code snippet and refreshed output is displayed in Figure F:
  background: rgb(30, 50, 230);
  background: -moz-linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);
  background: -webkit-linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);
  background: -o-linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);
  background: -ms-linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);
  background: linear-gradient(270deg, rgb(30, 50, 230) 7%, rgb(90, 140, 250) 99%);

Figure F

Now, let's wrap up this demonstration with an autofocus attribute for the "Name" input text field and placeholders for all of them, as shown with the HTML code snippet and screen capture displayed below and in Figure G:

<label>Name:</label> <input type="text" name="Name" placeholder="Enter your name here" autofocus></input><br />

<label>Address:</label> <input type="text" name="Address" placeholder="Enter your street address"></input><br />

<label>City:</label> <input type="text" name="City" placeholder="Enter your city here"> </input><label class="inline">State:</label> <input type="text" name="State" maxlength="2" size="2"placeholder="State"></input> <label class="inline">Zip Code:</label> <input type="text" name="Zip" maxlength="5" size="5" placeholder="Zip code"></input><br />

<label>Email:</label> <input type="text" placeholder="Enter your email address here"></input><br />

<label>Date of birth:</label> <input type="text" placeholder="Enter your birth date here"></input>

Figure G

The HTML and CSS files utilized in this demonstration are available for download.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments
izharaazmi
izharaazmi

Demo styling could have been better...