Skip to content

Instantly share code, notes, and snippets.

@mattjdever
Created September 21, 2013 04:17
Show Gist options
  • Save mattjdever/6647172 to your computer and use it in GitHub Desktop.
Save mattjdever/6647172 to your computer and use it in GitHub Desktop.
A Pen by David Scott Kirby.
<div class="modal">
<input class="search" type="text" />
<input type="range" max="100" step="1" value="1" />
</div>
:focus {
outline: 0;
}
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
outline: 0;
border: 0;
background: #4dceff linear-gradient(rgba(0, 0, 44, 0.8), rgba(0, 0, 23, 1));
overflow: hidden;
}
.modal {
width: 320px;
margin: 10% auto;
background-image: linear-gradient(#292929 0%, #111 100%);
background-position: left top;
background-repeat: repeat;
border-radius:10px;
padding:40px 20px 40px 20px;
box-shadow: inset 0 1px 1px rgba(255, 255,255, 0.15);
}
input {
box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
border: 2px solid #010;
background: #dedede;
border-radius: 10px;
margin: 10px 0 10px 10px;
padding: 0 5px 0 5px;
font-family: sans-serif;
font-size: 13px;
height: 12px;
color: #4f4f4f;
width: 90%;
}
input[type="text"] {
padding: 5px 5px 5px 5px;
}
input[type="range"]::-moz-range-track {
height: 12px;
box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
border: 2px solid #010;
background: #dedede;
margin: 0 0 0 0;
padding: 0 5px 0 5px;
border-radius: 10px;
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none !important;
height: 24px;
width: 24px;
border-radius: 50%;
border-top: 1px solid #FFF;
border-bottom: 1px solid #888;
background: #f0f0f2;
background: linear-gradient(#f0f0f2, #c2c3cb);
box-shadow: 0 5px 8px rgba(0,0,0,.6);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
height: 24px;
width: 24px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #888;
border-radius: 50%;
background: #f0f0f2;
background: linear-gradient(#f0f0f2, #c2c3cb);
box-shadow: 0 5px 8px rgba(0,0,0,.6);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment