Skip to content

Instantly share code, notes, and snippets.

@ramsesoriginal

ramsesoriginal/dabblet.css

Created February 29, 2012 08:54
Show Gist options
  • Save ramsesoriginal/1939279 to your computer and use it in GitHub Desktop.
Save ramsesoriginal/1939279 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Form input types + special attributes
Raw
dabblet.css
/**
* HTML5 Form input types + special attributes
*/
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
@import url(http://fonts.googleapis.com/css?family=Metamorphous);
@import url(http://fonts.googleapis.com/css?family=Allura);
@import url(http://fonts.googleapis.com/css?family=PT+Mono);
@import url(http://fonts.googleapis.com/css?family=Magra:700);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=VT323);
* {
padding:0;
margin:0;
box-sizing: border-box;
}
body {
white-space:nowrap;
overflow-x:scroll;
}
fieldset.outer {
display: inline-block;
vertical-align: top;
}
fieldset {
border: 1px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
}
fieldset li{
width: 100%;
display: block;
position: relative;
margin-bottom: 2px;
height: 1.7em;
clear:both;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
fieldset li .additionalInfo{
position: absolute;
padding: 5px;
margin-top: 5px;
display: none;
background-color: white;
border: 1px solid black;
border-radius: 5px;
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
fieldset li:hover .additionalInfo{
display: block;
}
.markup {
overflow: hidden;
transition: all 1s ease;
position: relative;
}
.markup > fieldset,
.styling > fieldset {
overflow: hidden;
transition: all 1s ease;
}
.markup:not(:hover) > fieldset,
.styling:not(:hover) > fieldset {
max-width: 150px;
}
.markup:hover > fieldset,
.styling:hover > fieldset {
overflow: visible;
max-width: 5000px;
}
.markup li,
.styling li {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
max-width: 500px
}
.markup li:hover,
.styling li:hover {
overflow: visible;
}
.markup li:hover code,
.styling li:hover code {
position: relative;
z-index: 30;
background-color: white;
white-space: pre;
display: inline-block;
border-radius: 10px;
border: 1px solid #ccc;
margin-left: -6px;
margin-top: -6px;
padding: 5px;
padding: 5px;
}
.custom input[type="hidden"] {
/*this is hidden, so what can you style?*/
/*All we can do is enforce invisibility*/
display:none;
}
.custom input[type="text"] {
border-radius: 5px;
border: none;
outline:none;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);
padding: 3px;
font-family: 'PT Sans', sans-serif;
background: linear-gradient(top, rgba(242,246,248,0.5) 0%,rgba(216,225,231,0.5) 50%,rgba(181,198,208,0.5) 51%,rgba(224,239,249,0.5) 100%);
width: 11.5em;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80f2f6f8', endColorstr='#80e0eff9',GradientType=0 );
}
.custom input[type="text"]:focus {
background-color: rgba(115,162,189,0.3);
}
.custom input[type="search"] {
box-shadow: none;
border: 1px solid #ccc;
outline:none;
font-family: 'Metamorphous', cursive;
padding: 2px 5px;
border-radius: 10px;
width: 11.5em;
-webkit-appearance: none;
position: relative;
}
.custom input[type="search"]:focus {
border-color: #f33;
color: #f33;
background: linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 );
}
.custom input[type="tel"] {
border:none;
outline:none;
border-bottom: 1px dashed black;
text-align: right;
color: rgb(122,151,178);
font-family: 'Allura', cursive;
font-size: 140%;
width: 7em;
margin-top: -3px;
}
.custom input[type="tel"]:focus{
text-shadow: 0px 0px 1px #000000;
filter: dropshadow(color=#000000, offx=0, offy=0);
}
.custom input[type="url"] {
background-color: transparent;
background: linear-gradient(left, rgba(0,5,1,0) 0%,rgba(0,6,1,1) 25%,rgba(0,7,1,1) 75%,rgba(0,8,1,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000501', endColorstr='#00000801',GradientType=1 );
border: none;
border-top:1px solid rgb(11,106,38);
border-bottom:1px solid rgb(11,106,38);
color: rgb(12,205,88);
outline:none;
font-family: 'PT Mono', sans-serif;
text-align: center;
font-size: 80%;
padding: 3px;
width: 12.5em;
}
.custom input[type="url"]:focus {
animation: neo 2s linear infinite;
}
@keyframes "neo" {
0%, 100% {
color: rgb(12,205,88);
text-shadow: 0px 1px 2px rgb(223,239,226);
}
50% {
color: rgb(223,239,226);
text-shadow: 0px 1px 2px rgb(12,205,88);
}
}
.custom input[type="email"] {
background-color: #474747;
font-family: 'Magra',Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
font-weight: bold;
text-shadow: 0px 2px 3px #555, 0px 0px 2px 3px #555, 0px -1px -1px 3px #999;
padding: 3px;
border-radius: 5px;
border:none;
outline:none;
box-shadow: inset 0px 2px 3px 2px #222, inset 1px 1px 2px 1px #555;
width: 12em;
}
.custom input[type="email"]:focus {
color:#aaa;
}
.custom input[type="password"] {
border:0;
outline:0;
padding: 3px;
border-radius: 10px 3px 7px 3px;
text-align: right;
color: rgba(0,0,0,0);
text-shadow: 0px 0px 9px #000, -10px 0px 9px #000, 0px 5px 15px #000, -5px 0px 15px #000;
border: 1px solid silver;
}
.custom input[type="password"]:focus {
border-color: red;
color: rgba(0,0,0,1);
animation: wobble .75s linear infinite;
text-shadow: none;
}
@keyframes "wobble" {
0% { transform: rotate(-2deg) }
20% { transform: rotate(4deg) }
30% { transform: rotate(1deg) }
40% { transform: rotate(3deg) }
55% { transform: rotate(0deg) }
70% { transform: rotate(-4deg) }
80% { transform: rotate(2deg) }
90% { transform: rotate(-2deg) }
90% { transform: rotate(3deg) }
}
.custom input[type="datetime"] {
font-family: 'Oswald', sans-serif;
width: 12em;
padding: 3px;
border-radius: 5px;
border: none;
outline: none;
box-shadow: 0px 0px 1px 1px rgba(32,32,32,0.2), inset 1px 1px 2px 1px rgba(180,180,180,0.2);
text-shadow:#fff 0px 1px 0, #000 0 -1px 0;
color:#808080;
background: linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
transition: all 1s ease;
}
.custom input[type="datetime"]:focus {
margin-left: -5em;
font-size: 1.4em;
line-height: 1.1em;
padding: 10px;
border-radius: 10px;
position: relative;
z-index: 15;
}
.custom input[type="date"] {
color: #424242;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing:-0.1em;
text-transform: lowercase;
font-variant: small-caps;
border:0;
outline:0;
box-shadow: 0px 0px 3px 3px rgba(32,32,32,0.2);
padding: 3px;
width: 12em;
}
.custom input[type="date"]:focus {
text-transform: uppercase;
}
.custom input[type="month"] {
}
.custom input[type="week"] {
}
.custom input[type="time"] {
}
.custom input[type="datetime-local"] {
}
.custom input[type="number"] {
}
.custom input[type="number"]:hover {
}
.custom input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.custom input[type="number"]::-webkit-inner-spin-button {
}
.custom input[type="number"]:active::-webkit-inner-spin-button {
}
.custom input[type="range"] {
}
.custom input[type="color"] {
}
.custom input[type="checkbox"] {
}
.custom input[type="radio"] {
}
.custom input[type="file"] {
}
.custom input[type="submit"] {
}
.custom input[type="image"] {
}
.custom input[type="reset"] {
}
.custom input[type="button"] {
}
Raw
dabblet.html
<form>
<ol>
<fieldset class="markup outer ">
<legend>Markup</legend>
<fieldset class="inputtypes">
<legend>Input types</legend>
<li><code>&lt;input type="hidden" id="t_hidden" ></code></li>
<li><code>&lt;input type="text" id="t_text" ></code></li>
<li><code>&lt;input type="search" id="t_search" ></code></li>
<li><code>&lt;input type="tel" id="t_tel" ></code></li>
<li><code>&lt;input type="url" id="t_url" ></code></li>
<li><code>&lt;input type="email" id="t_email" ></code></li>
<li><code>&lt;input type="password" id="t_password" ></code></li>
<li><code>&lt;input type="datetime" id="t_datetime" ></code></li>
<li><code>&lt;input type="date" id="t_date" ></code></li>
<li><code>&lt;input type="month" id="t_month" ></code></li>
<li><code>&lt;input type="week" id="t_week" ></code></li>
<li><code>&lt;input type="time" id="t_time" ></code></li>
<li><code>&lt;input type="datetime-local" id="t_datetimelocal" ></code></li>
<li><code>&lt;input type="number" id="t_number" ></code></li>
<li><code>&lt;input type="range" id="t_range" ></code></li>
<li><code>&lt;input type="color" id="t_color" ></code></li>
<li><code>&lt;input type="checkbox" id="t_checkbox" ></code></li>
<li><code>&lt;input type="radio" id="t_radio" ></code></li>
<li><code>&lt;input type="file" id="t_file" ></code></li>
<li><code>&lt;input type="submit" id="t_submit" ></code></li>
<li><code>&lt;input type="image" id="t_image" ></code></li>
<li><code>&lt;input type="reset" id="t_reset" ></code></li>
<li><code>&lt;input type="button" id="t_button" ></code></li>
</fieldset>
</fieldset>
<fieldset class="default outer ">
<legend>Default Styling</legend>
<fieldset class="inputtypes">
<legend>Input types</legend>
<li><label for="default_hidden">Hidden</label><input type="hidden" id="default_hidden" ></li>
<li><label for="default_text">Text</label><input type="text" id="default_text" ></li>
<li><label for="default_search">Search</label><input type="search" id="default_search" ></li>
<li><label for="default_tel">Tel</label><input type="tel" id="default_tel" ></li>
<li><label for="default_url">Url</label><input type="url" id="default_url" ></li>
<li><label for="default_email">Email</label><input type="email" id="default_email" ></li>
<li><label for="default_password">Password</label><input type="password" id="default_password" ></li>
<li><label for="default_datetime">Datetime</label><input type="datetime" id="default_datetime" ></li>
<li><label for="default_date">Date</label><input type="date" id="default_date" ></li>
<li><label for="default_month">Month</label><input type="month" id="default_month" ></li>
<li><label for="default_week">Week</label><input type="week" id="default_week" ></li>
<li><label for="default_time">Time</label><input type="time" id="default_time" ></li>
<li><label for="default_datetimelocal">Datetime-local</label><input type="datetime-local" id="default_datetimelocal" ></li>
<li><label for="default_number">Number</label><input type="number" id="default_number" ></li>
<li><label for="default_range">Range</label><input type="range" id="default_range" ></li>
<li><label for="default_color">Color</label><input type="color" id="default_color" ></li>
<li><label for="default_checkbox">Checkbox</label><input type="checkbox" id="default_checkbox" ></li>
<li><label for="default_radio">Radio</label><input type="radio" id="default_radio" ></li>
<li><label for="default_file">File</label><input type="file" id="default_file" ></li>
<li><label for="default_submit">Submit</label><input type="submit" id="default_submit" ></li>
<li><label for="default_image">Image</label><input type="image" id="default_image" ></li>
<li><label for="default_reset">Reset</label><input type="reset" id="default_reset" ></li>
<li><label for="default_button">Button</label><input type="button" id="default_button" ></li>
</fieldset>
</fieldset>
<fieldset class="styling outer ">
<legend>Custom styling</legend>
<fieldset class="inputtypes">
<legend>Input types</legend>
<li><code>input[type="hidden"] {
display:none;
}
</code></li>
<li><code>input[type="text"] {
border-radius: 5px;
border: none;
outline:none;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);
padding: 3px;
font-family: 'PT Sans', sans-serif;
background: linear-gradient(top, rgba(242,246,248,0.5) 0%,rgba(216,225,231,0.5) 50%,rgba(181,198,208,0.5) 51%,rgba(224,239,249,0.5) 100%);
width: 11.5em;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80f2f6f8', endColorstr='#80e0eff9',GradientType=0 );
}
input[type="text"]:focus {
background-color: rgba(115,162,189,0.3);
}
</code></li>
<li><code>input[type="search"] {
box-shadow: none;
border: 1px solid #ccc;
outline:none;
font-family: 'Metamorphous', cursive;
padding: 2px 5px;
border-radius: 10px;
width: 11.5em;
-webkit-appearance: none;
position: relative;
}
.custom input[type="search"]:focus {
border-color: #f33;
color: #f33;
background: linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 );
}
</code></li>
<li><code>input[type="tel"] {
border:none;
outline:none;
border-bottom: 1px dashed black;
text-align: right;
color: rgb(122,151,178);
font-family: 'Allura', cursive;
font-size: 140%;
width: 7em;
margin-top: -3px;
}
input[type="tel"]:focus{
text-shadow: 0px 0px 1px #000000;
filter: dropshadow(color=#000000, offx=0, offy=0);
}
</code></li>
<li><code>input[type="url"] {
background-color: transparent;
background: linear-gradient(left, rgba(0,5,1,0) 0%,rgba(0,6,1,1) 25%,rgba(0,7,1,1) 75%,rgba(0,8,1,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000501', endColorstr='#00000801',GradientType=1 );
border: none;
border-top:1px solid rgb(11,106,38);
border-bottom:1px solid rgb(11,106,38);
color: rgb(12,205,88);
outline:none;
font-family: 'PT Mono', sans-serif;
text-align: center;
font-size: 80%;
padding: 3px;
width: 12.5em;
}
input[type="url"]:focus {
animation: neo 2s linear infinite;
}
@keyframes "neo" {
0%, 100% {
color: rgb(12,205,88);
text-shadow: 0px 1px 2px rgb(223,239,226);
}
50% {
color: rgb(223,239,226);
text-shadow: 0px 1px 2px rgb(12,205,88);
}
}
</code></li>
<li><code>input[type="email"] {
background-color: #474747;
font-family: 'Magra',Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
font-weight: bold;
text-shadow: 0px 2px 3px #555, 0px 0px 2px 3px #555, 0px -1px -1px 3px #999;
padding: 3px;
border-radius: 5px;
border:none;
outline:none;
box-shadow: inset 0px 2px 3px 2px #222, inset 1px 1px 2px 1px #555;
width: 12em;
}
input[type="email"]:focus {
color:#aaa;
}
</code></li>
<li><code>input[type="password"] {
border:0;
outline:0;
padding: 3px;
border-radius: 10px 3px 7px 3px;
text-align: right;
color: rgba(0,0,0,0);
text-shadow: 0px 0px 9px #000, -10px 0px 9px #000, 0px 5px 15px #000, -5px 0px 15px #000;
border: 1px solid silver;
}
input[type="password"]:focus {
border-color: red;
color: rgba(0,0,0,1);
animation: wobble .75s linear infinite;
text-shadow: none;
}
@keyframes "wobble" {
0% { transform: rotate(-2deg) }
20% { transform: rotate(4deg) }
30% { transform: rotate(1deg) }
40% { transform: rotate(3deg) }
55% { transform: rotate(0deg) }
70% { transform: rotate(-4deg) }
80% { transform: rotate(2deg) }
90% { transform: rotate(-2deg) }
90% { transform: rotate(3deg) }
}
</code></li>
<li><code>input[type="datetime"] {
font-family: 'Oswald', sans-serif;
width: 12em;
padding: 3px;
border-radius: 5px;
border: none;
outline: none;
box-shadow: 0px 0px 1px 1px rgba(32,32,32,0.2), inset 1px 1px 2px 1px rgba(180,180,180,0.2);
text-shadow:#fff 0px 1px 0, #000 0 -1px 0;
color:#808080;
background: linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
transition: all 1s ease;
}
input[type="datetime"]:focus {
margin-left: -5em;
font-size: 1.4em;
line-height: 1.1em;
padding: 10px;
border-radius: 10px;
position: relative;
z-index: 15;
}
</code></li>
<li><code>input[type="date"] {
color: #424242;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing:-0.1em;
text-transform: lowercase;
font-variant: small-caps;
border:0;
outline:0;
box-shadow: 0px 0px 3px 3px rgba(32,32,32,0.2);
padding: 3px;
width: 12em;
}
input[type="date"]:focus {
text-transform: uppercase;
}
</code></li>
<li><code>input[type="month"] {}</code></li>
<li><code>input[type="week"] {}</code></li>
<li><code>input[type="time"] {}</code></li>
<li><code>input[type="datetime-local"] {}</code></li>
<li><code>input[type="number"] {}</code></li>
<li><code>input[type="range"] {}</code></li>
<li><code>input[type="color"] {}</code></li>
<li><code>input[type="checkbox"] {}</code></li>
<li><code>input[type="radio"] {}</code></li>
<li><code>input[type="file"] {}</code></li>
<li><code>input[type="submit"] {}</code></li>
<li><code>input[type="image"] {}</code></li>
<li><code>input[type="reset"] {}</code></li>
<li><code>input[type="button"] {}</code></li>
</fieldset>
</fieldset>
<fieldset class="custom outer">
<legend>Custom Styling</legend>
<fieldset class="inputtypes">
<legend>Input types</legend>
<li><label for="hidden" > Hidden </label><input type="hidden" id="hidden" > </li>
<li><label for="text" > Text </label><input type="text" id="text" > </li>
<li><label for="search" > Search </label><input type="search" id="search" > </li>
<li><label for="tel" > Tel </label><input type="tel" id="tel" > </li>
<li><label for="url" > Url </label><input type="url" id="url" > </li>
<li><label for="email" > Email </label><input type="email" id="email" > </li>
<li><label for="password" > Password </label><input type="password" id="password" > </li>
<li><label for="datetime" > Datetime </label><input type="datetime" id="datetime" > </li>
<li><label for="date" > Date </label><input type="date" id="date" > </li>
<li><label for="month" > Month </label><input type="month" id="month" > </li>
<li><label for="week" > Week </label><input type="week" id="week" > </li>
<li><label for="time" > Time </label><input type="time" id="time" > </li>
<li><label for="datetimelocal"> Datetime-local </label><input type="datetime-local" id="datetimelocal" ></li>
<li><label for="number" > Number </label><input type="number" id="number" > </li>
<li><label for="range" > Range </label><input type="range" id="range" > </li>
<li><label for="color" > Color </label><input type="color" id="color" > </li>
<li><label for="checkbox" > Checkbox </label><input type="checkbox" id="checkbox" > </li>
<li><label for="radio" > Radio </label><input type="radio" id="radio" > </li>
<li><label for="file" > File </label><input type="file" id="file" > </li>
<li><label for="submit" > Submit </label><input type="submit" id="submit" > </li>
<li><label for="image" > Image </label><input type="image" id="image" > </li>
<li><label for="reset" > Reset </label><input type="reset" id="reset" > </li>
<li><label for="button" > Button </label><input type="button" id="button" > </li>
</fieldset>
</fieldset>
</ol>
</form>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment