Skip to content

Instantly share code, notes, and snippets.

@thinkclay

thinkclay/Modern Forms.css

Forked from adrusi/Alumina UI.html
Created February 2, 2011 07:09
Show Gist options
  • Save thinkclay/807353 to your computer and use it in GitHub Desktop.
Save thinkclay/807353 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Modern Forms.css
/* FORM MODERNIZE */
input, select { vertical-align: middle; }
/* Buttons */
input[type="button"],
input[type="submit"],
button {
background: -webkit-linear-gradient(top, #ffffff, #dddddd);
background: -moz-linear-gradient(top, #ffffff, #dddddd);
background: linear-gradient(top, #ffffff, #dddddd);
border: 1px solid #aaaaaa;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(0,0,0,0.1);
color: #404040;
font-size: 13px;
min-width: 100px;
padding: 5px;
text-shadow: 0 1px 0 white;
vertical-align: middle;
cursor: pointer;
}
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
background: -moz-linear-gradient(top, #f8f8f8, #d8d8d8);
background: linear-gradient(top, #f8f8f8, #d8d8d8);
border-color: #a8a8a8;
}
input[type="button"]:focus,
input[type="submit"]:focus,
button:focus {
box-shadow: 0 0 4px rgba(27, 155, 224, 0.9), inset 0 0 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255, 255, 255, 0.5);
outline: 0;
}
input[type="button"]:active,
input[type="submit"]:active,
button:active,
input[type="checkbox"]:active {
background: -webkit-linear-gradient(top, #dddddd, #ffffff);
background: -moz-linear-gradient(top, #dddddd, #ffffff);
background: linear-gradient(top, #dddddd, #ffffff);
border-color: #aaaaaa;
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
position: relative;
top: 1px;
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
button:disabled {
background: #eeeeee;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
cursor: default;
opacity: 0.6;
text-shadow: none;
}
/* Checkboxes and Radios */
input[type="checkbox"]:active {
top: 0;
}
input[type="checkbox"], input[type="radio"] {
background: -webkit-linear-gradient(top, #ffffff, #dddddd);
background: -moz-linear-gradient(top, #ffffff, #dddddd);
background: linear-gradient(top, #ffffff, #dddddd);
border: 1px solid #aaaaaa;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 3px rgba(0,0,0,0.1);
cursor: pointer;
height: 15px;
padding: 0 !important;
text-align: center;
vertical-align: middle;
width: 15px;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
box-shadow: 0 0 4px rgba(27, 155, 224, 0.9), inset 0 0 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255, 255, 255, 0.5);
outline: 0;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
background: -moz-linear-gradient(top, #f8f8f8, #d8d8d8);
background: linear-gradient(top, #f8f8f8, #d8d8d8);
border-color: #a8a8a8;
}
input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
color: #404040;
content: "?";
font-family: Arial, sans-serif !important;
font-size: 13px;
line-height: 10px;
margin-left: 1px;
text-shadow: 0 1px 0 white;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
background: #eeeeee;
opacity: 0.6;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
cursor: default;
}
input[type="radio"] {
border-radius: 8.5px;
}
input[type="radio"]:checked::after {
content: "•";
font-size: 14px;
position: relative;
top: 1px;
}
/* All types of string inputs */
input[type="text"],
textarea,
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="time"] {
background: -webkit-linear-gradient(top, #eeeeee, #ffffff);
background: -moz-linear-gradient(top, #eeeeee, #ffffff);
background: linear-gradient(top, #eeeeee, #ffffff);
border: 1px solid #aaaaaa;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(0,0,0,0.15);
font-size: 13px;
min-width: 150px;
outline: 0;
padding: 7px;
vertical-align: middle;
}
input[type="text"]:focus,
textarea:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
box-shadow: 0 0 4px rgba(27, 155, 224, 0.9), inset 0 0 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255, 255, 255, 0.5);
}
input[type="text"]:disabled,
textarea:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="url"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled {
background: #e8e8e8;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
opacity: 0.6;
}
textarea {
display: block;
margin: 2px;
min-height: 150px;
min-width: 200px;
overflow: auto;
}
/* Range Sliders -- only supports webkit right now */
input[type="range"] {
background: -webkit-linear-gradient(top, #dddddd, #ffffff);
background: -moz-linear-gradient(top, #dddddd, #ffffff);
background: linear-gradient(top, #dddddd, #ffffff);
border: 1px solid #aaaaaa;
border-radius: 3.5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 1px rgba(0,0,0,0.1);
cursor: pointer;
height: 3px;
margin: 5px 2px;
vertical-align: middle;
width: 150px;
}
input[type="range"]::-webkit-slider-thumb {
background: -webkit-linear-gradient(top, #ffffff, #dddddd);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 3px rgba(0,0,0,0.1);
border: 1px solid #aaaaaa;
border-radius: 8.5px;
height: 15px;
width: 15px;
}
input[type="range"]:hover::-webkit-slider-thumb {
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#d4d4d4));
background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
}
input[type="range"]:disabled {
background: #eeeeee;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
cursor: default;
opacity: 0.6;
}
input[type="range"]:disabled::-webkit-slider-thumb {
background: #eeeeee;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Button Sets */
.buttonset input[type="button"],
.buttonset input[type="submit"],
.buttonset button {
border-radius: 0;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(0,0,0,0.1);
margin: 0 -5px 0 0;
}
.buttonset input[type="button"]:first-child,
.buttonset input[type="submit"]:first-child,
.buttonset button:first-child {
border-radius: 3px 0 0 3px;
}
.buttonset input[type="button"]:last-child,
.buttonset input[type="submit"]:last-child,
.buttonset button:last-child {
border-radius: 0 3px 3px 0;
}
.buttonset input[type="button"]:active,
.buttonset input[type="submit"]:active,
.buttonset button:active {
top: 0;
z-index: 1;
}
.buttonset input[type="button"]:hover,
.buttonset input[type="submit"]:hover,
.buttonset button:hover {
z-index: 1;
}
.buttonset {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(0,0,0,0.1);
display: inline-block;
margin: 2px;
}
/* Select Fields */
select {
background: url("/assets/dropdown.png") center right no-repeat,
-webkit-linear-gradient(top, #f8f8f8, #d8d8d8),
-moz-linear-gradient(top, #f8f8f8, #d8d8d8),
linear-gradient(top, #f8f8f8, #d8d8d8);
border: 1px solid #aaaaaa;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(0,0,0,0.15);
cursor: pointer;
font-size: 12px;
min-width: 150px;
padding: 5px 34px 5px 5px;
text-shadow: 0 1px 0 white;
vertical-align: middle;
}
select:hover {
background: url("/assets/dropdown.png") center right no-repeat,
-webkit-linear-gradient(top, #f8f8f8, #d8d8d8),
-moz-linear-gradient(top, #f8f8f8, #d8d8d8),
linear-gradient(top, #f8f8f8, #d8d8d8);
}
select:focus {
background: url("/assets/dropdown.png") center right no-repeat,
-webkit-linear-gradient(top, #f8f8f8, #d8d8d8),
-moz-linear-gradient(top, #f8f8f8, #d8d8d8),
linear-gradient(top, #f8f8f8, #d8d8d8);
outline: 0;
}
select:disabled {
background: url("/assets/dropdown.png") center right no-repeat, #eeeeee;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
cursor: default;
opacity: 0.6;
text-shadow: none;
}
input[type="checkbox"].switch {
background: -webkit-linear-gradient(top, #dddddd, #ffffff);
background: -moz-linear-gradient(top, #dddddd, #ffffff);
background: linear-gradient(top, #dddddd, #ffffff);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 2px rgba(0,0,0,0.1);
height: 12px;
border-radius: 6px;
margin-top: 4px;
position: relative;
width: 24px;
}
input[type="checkbox"].switch::after {
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
background: -webkit-linear-gradient(top, #ffffff, #dddddd);
-webkit-background-clip: content-box;
border: 1px solid #aaaaaa;
border-radius: 8.5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 3px rgba(0,0,0,0.1);
content: " ";
height: 15px;
left: -3px;
line-height: auto;
margin: 0;
position: absolute;
top: -4px;
width: 15px;
}
input[type="checkbox"].switch:checked {
background: -webkit-linear-gradient(top, #B1CBDD, #CCE9FF);
background: -moz-linear-gradient(top, #B1CBDD, #CCE9FF);
background: linear-gradient(top, #B1CBDD, #CCE9FF);
border: 1px solid #8FA2B3;
}
input[type="checkbox"].switch:checked::after { right: -3px; left: auto; }
input[type="checkbox"].switch:disabled,
input[type="checkbox"].switch:disabled::after {
background: #eeeeee;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
input[type="checkbox"].switch:checked:disabled { background: #bedaee; }
.select {
background: -webkit-linear-gradient(top, #ffffff, #dddddd);
background: -moz-linear-gradient(top, #ffffff, #dddddd);
background: linear-gradient(top, #ffffff, #dddddd);
border: 1px solid #aaaaaa;
border-radius: 3px;
font-size: 13px;
margin: 2px;
overflow: hidden;
position: relative;
width: 200px;
z-index: 1;
}
.select input[type="radio"] {
background: transparent;
border: 0;
border-bottom: 1px solid #aaaaaa;
border-top: 1px solid #ffffff;
border-radius: 0;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(0,0,0,0.1);
cursor: pointer;
display: block;
font-size: 13px!important;
height: auto;
margin: 0;
padding: 6px 5px!important;
position: relative;
text-align: left;
width: 200px;
z-index: -1;
}
.select input[type="radio"]::after {
color: inherit;
content: attr(value);
font-size: 13px;
margin-left: 0;
text-shadow: none;
top: 0;
}
.select input[type="radio"]:hover { background: rgba(0,0,0,0.05); }
.select input[type="radio"]:checked {
background: rgba(190, 218, 238, 0.7);
border-bottom: 1px solid #8FA2B3;
border-top: 1px solid #CCE9FF;
cursor: default;
}
.select input[type="radio"]:disabled {
background: transparent;
color: #888888;
cursor: default;
font-size: 13px;
opacity: 0.6;
}
.select input[type="radio"]:first-child { border-top: none; }
.select input[type="radio"]:last-child { border-bottom: none; }
Raw
Modern Forms.html
<form>
<input type="button" value="Button" />
<input type="button" value="Disabled" disabled />
<input type="button" value="This is a really long button" />
<br />
<div class="buttonset">
<input type="button" value="First" />
<input type="button" value="Second" />
<input type="button" value="Third" />
</div>
<br />
<input type="checkbox" />
<input type="checkbox" checked />
<input type="checkbox" disabled />
<input type="checkbox" disabled checked />
<input type="radio" name="demo" />
<input type="radio" name="demo" checked />
<input type="radio" disabled />
<input type="radio" disabled checked />
<input type="checkbox" class="switch" />
<input type="checkbox" class="switch" checked />
<input type="checkbox" class="switch" disabled />
<input type="checkbox" class="switch" disabled checked />
<br />
<input type="range" />
<input type="range" disabled />
<br />
<input type="text" value="This is a text input" />
<input type="text" value="This one's disabled" disabled />
<br />
<textarea style="float:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
<textarea style="float:left" disabled>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
<br style="clear:both" />
<select>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
<select disabled>
<option>Option #1</option>
<option selected>Disabled</option>
<option>Option #3</option>
</select>
<!-- okay, maybe this isn't the most semantic thing ever, but oh well -->
<div class="select">
<input type="radio" name="select" value="Option #1" />
<input type="radio" name="select" value="Option #2" checked />
<input type="radio" name="select" value="Option #3" />
<input type="radio" name="select" value="Option #4" />
<input type="radio" name="select" value="Option #5" />
</div>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment