CSS3 big style fieldset registration form

Experimenting with CSS3, I created a big style registration form with rounded borders and shadow effects. The only image used is not the button, but the pen that serves as a background image for the form itself. Click on the image to see the demo of the page: The CSS code has a lot of […]

Experimenting with CSS3, I created a big style registration form with rounded borders and shadow effects. The only image used is not the button, but the pen that serves as a background image for the form itself.

Click on the image to see the demo of the page:

Click on the image to see a DEMO
Click on the image to see a DEMO

The CSS code has a lot of CSS3 elements and this form will only work in browsers that have support for CSS3 (which IE of course has not):

form.registration{
 width:600px;
 float:left;
 color:#818181;
 background: #f1f1f1 url(pen.png) no-repeat top right;
 border: 2px solid #ccc;
 padding:10px;
 font-family: Georgia;
 font-size: 14px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
}

The form will have rounded borders and a box shadow which looks very intriguing by using rgba values. Next, we define how the fieldset should be positioned:

form.registration fieldset{
  border-top:1px solid #ccc;
  border-left:0;
  border-bottom:0;
  border-right:0;
  padding:6px;
  margin:0px 30px 0px 0px;
}

The legend will give a name to the fieldset and we want it to have a less intense color:

form.registration legend{
  text-align:left;
  color:#ccc;
  font-size:18px;
  padding:0px 4px 0px 4px;
  margin-left:20px;
}

Now, let’s define the rest of the form:

form.registration label{
  font-size: 32px;
  width:200px;
  float: left;
  text-align: right;
  color:#999;
  clear:left;
  margin:4px 4px 0px 0px;
  padding:0px;
}
form.registration input{
  font-family: Georgia;
  font-size: 28px;
  float:left;
  width:300px;
  border:1px solid #cccccc;
  margin:2px 0px 2px 2px;
  color:#00abdf;
  height:32px;
  padding:3px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
form.registration input:focus, form.registration select:focus{
  background-color:#E0E6FF;
}
form.registration select{
  font-family: Georgia;
  font-size: 28px;
  float:left;
  border:1px solid #cccccc;
  margin:2px 0px 2px 2px;
  color:#00abdf;
  height:40px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

And now, let’t define some style for the CSS3 button:

.button, .button:visited{
  float:right;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 5px 10px 5px 5px;
  color: #fff;
  text-decoration: none;
  font-size: 32px;
  padding: 10px 15px;
  background-color: #00abdf;
  display: inline-block;
  -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.button:hover{
  background-color: #777;
}

The html code looks as follows:

<form>
 <fieldset>
 <legend>About you</legend>
 <label>First name</label>
 <input type="text" maxlength="100" value=""/>           
 <label>Last name</label>
 <input type="text" maxlength="100" value=""/>                                  
 <label>Birthdate</label>
 <select>
 <option value="1">1</option>
 <option value="2">2</option>                             
 </select>
 <select>                               
 <option value="1">January</option>
 <option value="2">February</option>
 </select>
 <select>                           
 <option value="2009">2009</option>
 <option value="2008">2008</option>              
 </select>          
 </fieldset>
 <fieldset>
 <legend>Account details</legend>
 <label>E-Mail</label>
 <input type="text" maxlength="120" value=""/>
 <label>Password</label>
 <input type="password" maxlength="20"/>                                          
 </fieldset>
 <fieldset>   
 <a>Register</a>  
 </fieldset>   
</form>

Enjoy!

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 4

Comments are closed.
  1. 4

    you have done a great job. I used it for project and it’s really perfect..thank you again..

Comments are closed.