Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library Form CSS

Welcome to Dynamic Drive's new CSS library! Here you'll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast.

Page 1 of 2 pages  1 2 >

Animated Slide In Search Form

Animated Slide In Search Form
This compact search form initially reveals only a search icon inside a header, whereby clicking on it slides up from the bottom a large search form using CSS3 and JavaScript. Desktop and mobile optimized.

CSS3 checkbox and radio button replacements

CSS3 checkbox and radio button replacements
By hiding the default INPUT element of a checkbox/ radio button and styling its associated LABEL element instead, checkboxes and radio buttons can take on an entirely new look while maintaining their functionality inside a form. The following demonstrates just that.

CSS3 oval switch checkboxes

CSS3 oval switch checkboxes
The following uses CSS3 to create slick looking, oval shaped checkbox replacement switches. When the form is submitted, that checkbox value will be passed along like in a regular checkbox.

Pop up form labels

Pop up form labels
When it comes to filling out form fields, any contextual help is always appreciated. This CSS code takes the label element of a form field and transforms it into a pop up label that's sure to get noticed, not to mention provide guidance.

Responsive 2 column form

Responsive 2 column form
This is a clean, two column form that's also responsive, turning into a single column spanning the entire width of the page when the window's size is 480px or less.

Corporate CSS Tableless form

Corporate CSS Tableless form
This is an elegant tableless CSS form template with a decidedly corporate look and feel. The most commonly used form elements with corresponding legends are added in to get you up and going quickly.

CSS Tableless Form

CSS Tableless Form
This is a tableless CSS form which you can use as a template for implementing your own lightweight form. It uses a combination of float and negative margins to create a two column layout for the form.

Page 1 of 2 pages  1 2 >

Sponsors
Copyright 2006-2016 Dynamic Drive