Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
An imageless forms library written in css3 with a javascript fallback
JavaScript
Branch: master
Failed to load latest commit information.
css3 forms.esproj first commit
README eddited README
blue.css added css3 pulse animation to focused form elements (-webkit-keyframes)
blue.html first commit
green.css added css3 pulse animation to focused form elements (-webkit-keyframes)
green.html first commit
grey.css
index.html first commit
main.js
modernizr-1.5.min.js first commit
preview.html first commit
red.css added css3 pulse animation to focused form elements (-webkit-keyframes)
red.html first commit

README

The css3 forms library styles textboxes, textareas, buttons, radios, textboxes, and partially select dropdowns.
demo page: http://adrusi.com/css3-forms/
support:
webkit: full support
mozilla: requires javascript for radios and checkboxes and does not support select dropdowns
trident (ie): negligible styling, still functional

default themes: 
•Grey
•Blue
•Green
•Red

HOWTO:
1) link to the stylesheet you want to use (grey.css, blue.css, green.css, or red.css)
2) link to the javascript fallback for mozilla (main.js)
2) wrap each form element and its corresponding label in a <p> tag
   if you dont want a label, give the paragraph the class "nolabel" (no quotes)
3) fieldset/legend elements are supported!

Example:
<form action="signup.php" method="post">
	<fieldset>
		<legend>Signup</legend>
		<p>
			<label for="name">Your Name:</label>
			<input type="text" name="name" id="name" />
		</p>
		<p>
			<label for="email">Your Email:</label>
			<input type="text" name="email" id="email" />
		</p>
		<p>
			<label for="username">Desired Username:</label>
			<input type="text" name="username" id="username" />
		</p>
		<p>
			<label for="password">Password:</label>
			<input type="password" name="password" id="password" />
		</p>
		<p>
			<label for="passwordc">Password Confirmation:</label>
			<input type="password" name="passwordc" id="passwordc" />
		</p>
		<p>
			<label for="tos">Agree to the Terms of Service</label>
			<input type="checkbox" name="tos" value="agree" id="tos" />
		</p>
		<p class="nolabel">
			<input type="submit" value="Sign Up!" />
		</p>
	</fieldset>
</form>

a screenshot of the resulting form can be found at: http://www.flickr.com/photos/43186605@N05/4829198773/
Something went wrong with that request. Please try again.