Skip to content

Instantly share code, notes, and snippets.

@Paul-Browne
Created June 12, 2014 10:22
Show Gist options
  • Save Paul-Browne/644b8875773bde7bdaff to your computer and use it in GitHub Desktop.
Save Paul-Browne/644b8875773bde7bdaff to your computer and use it in GitHub Desktop.
Input CSS
/*********************
INPUTS
*********************/
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea,
.field {
display: block;
height: 40px;
line-height: 40px;
padding: 0 12px;
margin-bottom: 14px;
font-size: 1em;
color: #5c6b80;
border-radius: 3px;
vertical-align: middle;
box-shadow: none;
border: 0;
width: 100%;
max-width: 400px;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eaedf2;
-webkit-transition: background-color 0.24s ease-in-out;
transition: background-color 0.24s ease-in-out; }
input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus,
input[type="password"]:active,
input[type="datetime"]:focus,
input[type="datetime"]:active,
input[type="datetime-local"]:focus,
input[type="datetime-local"]:active,
input[type="date"]:focus,
input[type="date"]:active,
input[type="month"]:focus,
input[type="month"]:active,
input[type="time"]:focus,
input[type="time"]:active,
input[type="week"]:focus,
input[type="week"]:active,
input[type="number"]:focus,
input[type="number"]:active,
input[type="email"]:focus,
input[type="email"]:active,
input[type="url"]:focus,
input[type="url"]:active,
input[type="search"]:focus,
input[type="search"]:active,
input[type="tel"]:focus,
input[type="tel"]:active,
input[type="color"]:focus,
input[type="color"]:active,
select:focus,
select:active,
textarea:focus,
textarea:active,
.field:focus,
.field:active {
background-color: #f7f8fa;
}
textarea {
max-width: 100%;
min-height: 120px;
line-height: 1.5em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment