Skip to content

Instantly share code, notes, and snippets.

@ryun
Created May 30, 2012 20:32
Show Gist options
  • Save ryun/2838756 to your computer and use it in GitHub Desktop.
Save ryun/2838756 to your computer and use it in GitHub Desktop.
Default form styles
/**
* Forms
*/
form
{
margin: 0;
}
form p, label {display:block;}
form ul
{
margin: 5px 0 5px 0;
padding: 0;
}
form ul li
{
list-style: none;
}
fieldset
{
border: 1px solid rgba(0, 0, 0, 0.2);
margin: 5px 0 15px 0;
padding: 25px;
}
fieldset ul
{
margin: 0;
padding: 0;
}
fieldset ul li
{
list-style: none;
}
/**
* Indicate that 'label' will shift focus
* to the associated form element
*/
label
{
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
legend
{
border: 0;
padding: 0;
margin-left: 5px;
font-size: 18px;
font-weight: bold;
}
button,
input,
select,
textarea
{
font-size: 13px;
margin: 5px 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input[type="reset"],
input[type="submit"],
input[type="button"]
{}
input[type="text"],
input[type="password"],
textarea
{
width: 98%;
padding: 5px;
outline: 3px solid rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
input[type="file"]
{
width: 98%;
padding: 5px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
textarea
{
width: 98%;
min-height: 100px;
}
input.error,
textarea.error
{
border: 1px solid #ff0000;
}
label.error
{
width: 100%;
font-size: 12px;
font-weight: normal;
color: #ff0000;
float: left;
margin-top: -5px;
}
/**
* Colors for form validity
*/
input:valid,
textarea:valid
{
}
input:invalid,
textarea:invalid
{
background-color: #f0dddd;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment