Skip to content

Instantly share code, notes, and snippets.

@josedaniel josedaniel/input.css
Created Jun 26, 2012

Embed
What would you like to do?
CSS custom inputs
/* CUSTOM FORM CONTROLS */
input[type="text"],input[type="password"]{
font-size:13px;
padding: 3px 7px;
border:none;
box-shadow: inset 0 1px 2px #999;
outline: none;
color:#444;
margin-right:10px;
border-bottom: 1px solid #eee;
max-width: 165px;
}
input[type="text"].medium{
width: 70px;
}
input[type="text"].small{
width: 35px;
}
input[type="text"]:focus,input[type="password"]:focus{
box-shadow: inset 0 1px 2px #666;
margin-right:10px;
}
input[type="button"],input[type="submit"]{
font-size:13px;
cursor: pointer;
border: none;
background-color:#259271;
text-align: right;
color: #fff;
padding: 7px 15px;
border-radius: 0.3em;
font-weight:bold;
box-shadow: inset 0 0 3px #999;
text-shadow:#666 1px 1px 2px;
outline: none;
}
input[type="button"]:hover,input[type="submit"]:hover{
box-shadow: none;
background-color:#02AF88;
}
input[type="button"]:active,input[type="submit"]:active{
box-shadow: inset 0 0 3px #333;
background-color:#02684E;
}
select{
width: 190px;
background-color: #fff;
border:1px solid #bbb;
padding: 2px 4px;
color: #999;
outline: none;
margin-right:5px;
}
option{
color: #444;
background-color: #fff;
padding: 7px 15px;
cursor: pointer;
}
option:hover{
background-color:#1A6CFF;
color: #fff;
}
textarea{
font-size:13px;
padding: 7px 15px;
border:none;
box-shadow: inset 0 0 3px #999;
border-radius: 0.3em;
outline: none;
color:#444;
min-width:400px;
min-height:150px;
width:100%;
box-sizing: border-box;
}
textarea:focus{
box-shadow: inset 0 0 3px #333;
}
fieldset{
border:1px solid #ddd;
padding:10px;
background-color: #fff;
margin-top: 10px;
}
fieldset fieldset{
margin-top: 0;
}
legend{
padding:4px;
font-weight: bold;
display: block;
background-color: #fff;
text-transform: uppercase;
color:#259271;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.