Return to Snippet

Revision: 46785
at May 25, 2011 02:02 by jeremytarpley


Initial Code
/***************************BASE FORMS CSS***************************/
select, input, button, textarea {
    font: 100% Verdana, Lucida, Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-family: Verdana, Lucida, Helvetica, Arial, sans-serif;
    font-weight: normal;
    vertical-align: baseline;
    margin: 2px 2px 10px 0;
    padding: 4px 3px;
}

input, button, textarea {   
    border: 1px solid #bbb;
    outline: 0;
    background: #F9F9F9;
    background: linear-gradient(center top, #f0f0f0, #ffffff) repeat scroll 0 0 #ffffff;
    background: -moz-linear-gradient(center top, #f0f0f0, #ffffff) repeat scroll 0 0 #ffffff;
    background: -webkit-gradient(linear, left top, left 25, from(#F9F9F9), to(#ffffff));  
}

select {
    padding: 0;
}

/*
 * laying down a base style for all buttons
 * inspired by GOOGLE buttons:
 */
input[type="submit"], input[type="reset"], button {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #F3F3F3;
    background: linear-gradient(center top , #f9f9f9, #e2e2e2) repeat scroll 0 0 #f9f9f9;
    background: -moz-linear-gradient(center top , #f9f9f9, #e2e2e2) repeat scroll 0 0 #f9f9f9;
    background: -webkit-gradient(linear, left top, left 25, from(#f9f9f9), to(#e2e2e2));  
    cursor: pointer;
    margin: 0 8px 2px 0;
    outline: medium none;
    padding: 3px 6px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

input[type="file"] {
}

input:hover, textarea:hover,  
input:focus, textarea:focus {  
    border-color: #c9c9c9;
    background-color: #fff;
    background: #fff;
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

input[type="submit"]:focus, button:focus,
input[type="submit"]:hover, button:hover {
    background: #e9e9e9;
    background: linear-gradient(center top , #f9f9f9, #e9e9e9) repeat scroll 0 0 #f9f9f9;
    background: -moz-linear-gradient(center top , #f9f9f9, #e9e9e9) repeat scroll 0 0 #f9f9f9;
    background: -webkit-gradient(linear, left top, left 25, from(#f9f9f9), to(#e9e9e9)); 
}

form legend {
    background-color: transparent;
    border: medium none;
    display: block;
    font-size: 95%;
    font-weight: bold;
    line-height: 150%;
    margin: 0;
    padding: 0 0 0.5em;
}

form label {
    line-height: 1.5em;
    margin: 1em 0;
    padding: 0 0 1em;
}

fieldset {
    line-height: 1.5em;
    margin: 1em 0;
    padding: 0 1em 1em;
    width: auto;
}
/***************************END BASE FORMS CSS***************************/

Initial URL


Initial Description


Initial Title
CSS baseline for forms

Initial Tags
forms, web

Initial Language
CSS