Fire JS Bin - umbrUI

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  
 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
  
  <title>umbrUI - CSS3 range slider, checkbox + radio button</title> 
  
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">

</head> 
 
<body> 
  
  
  
  <div id="side"> 
    
    <h1>umbrUI</h1> 
    <h2>Pictos enabled CSS3 UI elements</h2> 
    <p><a href="http://twitter.com/ubuwaits/status/24716641758">There was a request</a>, so I tried. The outcome: No JavaScript, no images and just minimal markup - but a ton of messy <strong>CSS3</strong>. And only <strong>Safari</strong> will render it properly. Chrome is close, but the 3D perspective doesn't work. iOS has some issues with the icons and Firefox, Opera and IE.. well, I haven't tried yet. No Safari? You can see a screenshot of the <a href="http://drbl.in/60851">range slider</a>, <a href="http://drbl.in/56613">checkbox</a> and <a href="http://drbl.in/57410">radio button</a>. 
    </p> 
    <p>If you're curious about the name. <strong>Umbra</strong> means shadow in latin. Read <a href="http://simurai.com/post/1155924231/umbrui-css3-checkbox">more details</a>.</p> 
    <p><strong>Credits</strong>: Made by <a href="http://simurai.com">simurai</a>. The Rocker switches are based on <a href="http://drbl.in/55489"> Mike Bernardo's original design</a>.</p> 
    <p><strong>PS</strong>: For the icons I'm using the <a href="http://pictos.drewwilson.com/bundle.html">Pictos Font</a>. This is also my entry into the iMac Pictos Contest. Check out <a href="http://pictos.drewwilson.com/bundle.html">the bundle</a>.</p> 
    
    <p><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="simurai">Tweet</a></p> 
  </div> 
  
  
  
  <div class="wrapper"> 
        
    <span class="slider"><input type="range" min="0" max="100" /></span> 
    
  </div> 
  
  <div class="wrapper"> 
    
    <input type="checkbox" data-icon1=">" data-icon2="<" /> 
    <input type="checkbox" data-icon1=")" data-icon2="(" /> 
    <input type="checkbox" data-icon1="P" data-icon2="v" /> 
          
  </div> 
 
  
  <div class="wrapper"> 
        
    <input type="radio" name="player" class="record" data-icon="•" /> 
    <fieldset> 
      <input type="radio" name="player" data-icon="4" /><input type="radio" name="player" data-icon="8" /><input type="radio" name="player" data-icon="7" /><input type="radio" name="player" data-icon="6" /><input type="radio" name="player" data-icon="5" /> 
    </fieldset> 
          
  </div> 
 
 
  <div class="wrapper"> 
  
    <code> 
      <span class="<strong>slider</strong>"><input type="<strong>range</strong>" min="0" max="100" /></span>
      
      <br /> 
      
      <input type="<strong>checkbox</strong>" data-icon1="<strong>P</strong>" data-icon2="<strong>v</strong>" />
      
      <br /> 
      
      <input type="<strong>radio</strong>" name="<strong>player</strong>" data-icon="<strong>4</strong>" />
      
    </code>      
      
  </div> 
  
  
</body> 
 
</html>

/* @override http://lab.simurai.com/css/umbrui/style.css */

html {
  font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  background: #1a1a1a url(/assets/simurai/umbrui_bg.jpg) no-repeat fixed center top;
}

body {
  padding-top: 50px;
}

/* Globals */

a {
  text-decoration: none;
  color: #4c7f99;
}
a:hover {
  color: #5893b1;
}
p, ul, code {
  margin-bottom: 20px;
}
code {
  display: inline-block;
  padding: 10px 11px;
  margin-top: 30px;
  font-size: 1.2em;
  line-height: 1.5em;
  color: #666;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.15);
  -webkit-box-shadow: inset rgba(0,0,0,0.15) 0 1px 1px, inset rgba(255,255,255,0.08) 0 -1px 1px;
  text-align: left;
}

code.inline {
  display: inline;
  margin-top: 0px;
  padding: 3px 5px;
  background-color: transparent;
  -webkit-box-shadow: inset rgba(0,0,0,0) 0 1px 1px;
  color: #fff;
}
code strong {
  color: #999;
}

blockquote {
  margin-left: 20px;
}

/* demo */

.wrapper {
  text-align: center;
  padding: 30px 380px ;
}

input[type="checkbox"] { 
  margin: 10px;
}

.wrapper a {
  font-size: 1.4em;
}

/* side */

#side {
  position: absolute;
  left: 50px;
  top: 60px;
  width: 300px;
  color: #424242;
}
#side h1 {
  font-size: 6.5em;
  font-weight: bold;
  margin-bottom: 20px;
  
  -webkit-text-stroke: hsla(200,100%,80%,.1) 1px;

color: #192a33;
  text-shadow:   hsla(200,100%,70%,.9) 1px -1px 2px, 
          hsla(200,100%,50%,.2) 0 -5px 20px, rgba(0,0,0,0.9) -10px 20px 25px;
}
#side h2 {
  font-size: 1.8em;
  margin: 10px 0 50px 0;
}
#side p {
  font-size: 1.2em;
  line-height: 1.3em;
}
#side strong {
  color: #727272;
}
#side .meta {
  font-size: 1.1em;
}

/* food */

#food {
  width: 160px;
  position: fixed;
  z-index: 87;
  top: 50px;
  right: 50px;
}
#food img {
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#food img:hover {
  -webkit-transform: translateY(-1px);
}
#food img:active {
  -webkit-transform: translateY(0px);
}
#food a {
  color: #777;
  font-size: 11px; 
  line-height: 1.3em;
  text-shadow: #000 0 1px 0;
}
#food a:hover {
  color: #aaa;
}

#food .yoggrtad {
  margin-bottom: 10px;
}
#food .yoggrttext {
  display: block;
  margin: 10px 0;
}
#food .adby a {
  text-transform: uppercase;
  font-size: 11px;
}

/* umbrUI checkboxes 1.0 by simurai.com

Sorry, it's a little messy in here.. there are just so many pseudo classes, even I have a hard time finding stuff.

Usage:
  <input type="checkbox" data-icon1="P" data-icon2="v" /> 
  "P" and "v" are the Pictos Font icons
  
*/

/*@import url(pictos/pictos.css);*/

/* Pictos Font
* Copyright © 2010 Drew Wilson
* http://www.drewwilson.com  -  http://pictos.drewwilson.com
*
* The fonts included in this stylesheet are subject to the End User License you purchased
* from Drew Wilson. The fonts are protected under domestic and international trademark and 
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
* distributing this font software.
*
* This font is NOT free. It is illegal to use this font without paying for a license. 
*/

@font-face {
    font-family: 'Pictos';
    src: url('/assets/simurai/pictos-web.eot');
    src: local('☺'), url('/assets/simurai/pictos-web.woff') format('woff'), url('/assets/simurai/pictos-web.ttf') format('truetype'), url('/assets/simurai/pictos-web.svg#webfontphKv1xv9') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ----------- Checkbox */

input[type="checkbox"] {
  -webkit-appearance:none;  /* Remove Safari default */
  
  width: 120px;
  height: 40px;
  
  position: relative;
  border-radius: 6px;
  background-color: #000;
  -webkit-background-clip: padding-box;
  
  border: 0;
  border-bottom: 1px solid transparent;
  -webkit-perspective: 200;
}

input[type="checkbox"]:before, input[type="checkbox"]:after {
  font:       22px/13px 'Pictos', sans-serif;
  
  text-align:   center;
  
  position:   absolute;
  z-index:   1;
    
    width:       56px;
  height:     30px;
    top:       4px;
    
    border: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
}

input[type="checkbox"]:before {
  content:   attr(data-icon1);
  left:     4px;
  border-radius: 3px 0 0 3px;

}

input[type="checkbox"]:after {
  content:   attr(data-icon2);
  right:     4px;
  border-radius: 0 3px 3px 0;
}

/* ----------- checked/unchecked */

/* unchecked */
input[type="checkbox"] {
  -webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%, 
              from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
              color-stop(.1,rgba(255,255,255,.05)),
              color-stop(.3,rgba(5,137,200,0.4)),
              color-stop(.45,rgba(255,255,255,.05)),
              color-stop(.9,rgba(255,255,255,.1)) 
              )100% 100%;
  
  background-image: -webkit-gradient(
    linear, right top, left top,
    color-stop( 0,   hsl(0,0%,0%) ),
    color-stop( 0.14,   hsl(0,0%,50%) ),
    color-stop( 0.15,   hsl(0,0%,0%) )
  );            
  -webkit-box-shadow: inset #000 -7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
}
input[type="checkbox"]:after {
  background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
    from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 
  );
  border-right: 1px solid transparent;
  -webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
              from(rgba(255,255,255,0)), 
              color-stop(.2,rgba(255,255,255,0)),
              color-stop(.4,rgba(255,255,255,.5)),
              to(rgba(255,255,255,.05))
              )10% 100%;
  
  -webkit-box-shadow: rgba(0,0,0,.6) 8px 3px 10px;
  -webkit-transform: rotateY(-30deg) scaleX(.9) scaleY(1.1) translateX(-8px);
}

/* checked */
input[type="checkbox"]:checked {
  -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
              from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
              color-stop(.1,rgba(255,255,255,.05)),
              color-stop(.3,rgba(5,137,200,0.4)),
              color-stop(.45,rgba(255,255,255,.05)),
              color-stop(.9,rgba(255,255,255,.1)) 
              )100% 100%;
  
  background-image: -webkit-gradient(
    linear, left top, right top,
    color-stop( 0,   hsl(0,0%,0%) ),
    color-stop( 0.14,   hsl(0,0%,50%) ),
    color-stop( 0.15,   hsl(0,0%,0%) )
  );            
  -webkit-box-shadow: inset #000 7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
}
input[type="checkbox"]:checked:before {
  background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
    from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 
  );
  border-left: 1px solid transparent;
  -webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
              from(rgba(255,255,255,0)), 
              color-stop(.2,rgba(255,255,255,0)),
              color-stop(.4,rgba(255,255,255,.5)),
              to(rgba(255,255,255,.05))
              )10% 100%;

-webkit-box-shadow: rgba(0,0,0,.6) -8px 3px 10px;
  -webkit-transform: rotateY(30deg) scaleX(.9) scaleY(1.1) translateX(8px);
}

/* ----------- active/inactve */

/* Active */
input[type="checkbox"]:before, input[type="checkbox"]:checked:after {
  color: #0589c8;
  text-shadow:   rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;
  -webkit-transform: none;
  background-image: -webkit-gradient( linear, left top, left bottom,
    from(   hsl(0,0%,20%) ), to( hsl(0,0%,15%) )
  );
  -webkit-border-image: none;
  -webkit-box-shadow: none;
  
  z-index:   2;
  -webkit-box-reflect:   below -4px -webkit-gradient(linear, left top, left bottom, 
              from(transparent), color-stop(0.3, transparent), to( rgba(255,255,255,0.2) ));
          
}

/* Inactive */
input[type="checkbox"]:after, input[type="checkbox"]:checked:before {
  color: #000;
  text-shadow: rgba(255,255,255,.1) 0 -1px 0;
  -webkit-box-reflect: none;
  z-index:   1;
}

/* ----------- hover */

input[type="checkbox"]:hover {
  cursor: pointer;
}

input[type="checkbox"]:hover:before {
  background-image: -webkit-gradient( linear, left top, left bottom,
    from(   hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
  );

}
input[type="checkbox"]:hover:after {
  background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
    from( hsl(0,0%,16%) ),to( hsl(0,0%,11%) ) 
  );
}

input[type="checkbox"]:checked:hover:before {
  background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
    from( hsl(0,0%,16%) ),to( hsl(0,0%,12%) ) 
  );

}
input[type="checkbox"]:checked:hover:after {
  background-image: -webkit-gradient( linear, left top, left bottom,
    from(   hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
  );
}

/* umbrUI radio buttons 1.0 by simurai.com

Sorry, it's a little messy in here.. there are just so many pseudo classes, even I have a hard time finding stuff.

Usage:
  <input type="radio" name="player" data-icon="4" /> 
  
  data-icon="4" is used for the Pictos Font icon
  
*/

@import url(pictos/pictos.css);

/* ----------- radio */

fieldset {
  display: inline-block;
  
}
fieldset input[type="radio"] {
  border-radius: 0;
  width: 64px;
  margin: 3px 0;
}

fieldset input[type="radio"]:first-child { border-radius: 6px 0 0 6px; }
fieldset input[type="radio"]:last-child { border-radius: 0 6px 6px 0; width: 68px; }

input[type="radio"] {
  -webkit-appearance:none;  /* Remove Safari default */
  
  width: 68px;
  height: 80px;
  
  position: relative;
  display: inline-block;
  margin: 3px;
  border-radius: 6px;
  
  background-color: #000;
  
  -webkit-background-clip: padding-box;
  
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  
  -webkit-perspective: 200;
}

input[type="radio"]:before {
  content:     attr(data-icon);
  
  font:       22px/22px 'Pictos', sans-serif;
  text-shadow:   rgba(255,255,255,0.08) 0 -1px 0;
  
  text-align:   center;
  
  position:     absolute;
  z-index:     10;
    
    width:       60px;
  height:     70px;
  
  margin: 4px;
  border-radius: 3px;  
  
    background-image: -webkit-gradient( linear, left top, left bottom,
    from(   hsl(0,0%,20%) ), to( hsl(0,0%,15%) )
  );
  
  border-top: 1px solid rgba(255,255,255,0.15);
  
}

input[type="radio"]:after {
  content: "";
  z-index:     12;
  position:     absolute;
   
    margin: 3px;
  border-radius: 3px;
  
  left:       6px;
  top:       62px;
    width:       50px;
  height:     5px;
  
  -webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 2px, inset rgba(255,255,255,.1) 0 1px 1px;
        
}

/* ----------- checked */

fieldset input[type="radio"]:active, fieldset input[type="radio"]:checked {
  -webkit-box-shadow: inset #000 4px 0px 4px, inset #000 0 0px 4px;
}
fieldset input[type="radio"]:last-child:active, fieldset input[type="radio"]:last-child:checked {
  -webkit-box-shadow: inset #000 4px 0px 4px, inset #000 -4px 0 4px;
}

input[type="radio"]:active, input[type="radio"]:checked {
  -webkit-box-shadow: inset #000 4px 0px 4px, inset #000 -4px 0px 4px;
  background-image: -webkit-gradient(
    linear, left top, left bottom,
    color-stop( 0,     hsl(0,0%,10%) ),
    color-stop( 0.14,   hsl(0,0%,30%) ),
    color-stop( 0.15,   hsl(0,0%,0%) )
  );
    
}

input[type="radio"]:active:before, input[type="radio"]:checked:before {
  background-image: -webkit-gradient( linear, left top, left bottom,
    from(   hsl(0,0%,19%) ), to( hsl(0,0%,12%) )
  );
  
  z-index:     11;
  
  border: 0;
  border-top: 1px solid transparent;
  -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
              color-stop(0,  hsla(200,100%,85%,.05)),
              color-stop(.5, hsl(200,0%,40%)),
              color-stop(1,  hsla(200,100%,80%,.05)) 
              )50% 100%;
              
  -webkit-transform: rotateX(-30deg) scaleX(.95) translateY(3px);      
}

input[type="radio"]:checked:before {
  color: #0589c8;
  text-shadow:   rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;  
  -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
              color-stop(0,  hsla(200,100%,85%,.05)),
              color-stop(.5, hsl(200,20%,50%)),
              color-stop(1,  hsla(200,100%,80%,.05)) 
              )50% 100%;
}

input[type="radio"]:active:after, input[type="radio"]:checked:after {
  top: 59px;
  -webkit-transform: scale(.9);
  opacity: .4;
}

/* ----------- hover */

input[type="radio"]:hover {
  cursor: pointer;
}
input[type="radio"]:checked {
  cursor: default;
}

input[type="radio"]:hover:before {
  background-image: -webkit-gradient( linear, left top, left bottom,
    from(   hsl(0,0%,19.5%) ), to( hsl(0,0%,14%) )
  );
}
input[type="radio"]:checked:hover:before {
  background-image: -webkit-gradient( linear, left top, left bottom,
    from(   hsl(0,0%,19%) ), to( hsl(0,0%,12%) )
  );
}

/* ----------- record */

input[type="radio"].record:before {
  font-size: 5.55em;
  line-height: 0em;
}

input[type="radio"].record:checked:before {
  color: #e90000;
  text-shadow: rgba(0,0,0,.5) 0 1px 1px, #e90000 0 0 10px;  
  -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
              color-stop(0,  hsla(0,100%,85%,.05)),
              color-stop(.5, hsl(0,20%,50%)),
              color-stop(1,  hsla(0,100%,80%,.05)) 
              )50% 100%;
}

/* umbrUI range slider 1.0 by simurai.com

Usage:
  <span class="slider"><input type="range" min="0" max="100" /></span>
      
*/

@import url(pictos/pictos.css);

/* -------------- Range Slider -------------- */

input[type="range"] {
  -webkit-appearance:  none;  /* Remove Safari default */
  
  width: 250px;
  height: 5px;
  border-radius: 2px / 4px;
  position: relative;

background-color: #000;
  
  -webkit-background-clip: padding-box;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: ew-resize;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:  none;  /* Remove Safari default */
  position: relative;
  z-index:     1;

width: 26px;
  height: 40px;
  border-radius: 3px / 6px ;
  
  background-image: -webkit-gradient( linear, left top, right top,
    color-stop( 0,     hsl(0,0%,15%) ), 
    color-stop( .16,   hsl(0,0%,22%) ), 
    color-stop( .18,   hsl(0,0%,30%) ), 
    color-stop( .2,   hsl(0,0%,26%) ), 
    
    color-stop( .42,  hsl(200,60%,30%) ), 
    color-stop( .44,  hsl(200,0%,15%) ), 
    color-stop( .46,  hsl(200,80%,45%) ), 
    color-stop( .54,  hsl(200,80%,45%) ), 
    color-stop( .56,  hsl(200,0%,15%) ), 
    color-stop( .58,  hsl(200,60%,30%) ), 
    
    color-stop( .8,    hsl(0,0%,26%) ), 
    color-stop( .82,  hsl(0,0%,30%) ), 
    color-stop( .84,  hsl(0,0%,22%) ), 
    color-stop( 1,     hsl(0,0%,15%) ) 
  );
  
  -webkit-box-shadow: 
    
    inset hsla(0,0%,100%,.15) 0 1px 0px,
    
    hsl(0,0%,17%) 0 2px 0px,
    hsl(0,0%,15%) 0 4px 0px,
    hsl(0,0%,13%) 0 6px 0px,
    
    rgba(0,0,0,.5) 0 8px 5px;
  
  -webkit-transform: translateY(-3px);
  -webkit-box-reflect:   below 0px -webkit-gradient(linear, left top, left bottom, 
              from(transparent), color-stop(0.6, transparent), to( rgba(255,255,255,0.3) ));

}
.slider:hover input[type="range"]::-webkit-slider-thumb {
  background-image: -webkit-gradient( linear, left top, right top,
    color-stop( 0,     hsl(0,0%,15%) ), 
    color-stop( .16,   hsl(0,0%,22%) ), 
    color-stop( .18,   hsl(0,0%,29%) ), 
    color-stop( .2,   hsl(0,0%,25%) ), 
    
    color-stop( .42,  hsl(200,60%,29%) ), 
    color-stop( .44,  hsl(200,0%,15%) ), 
    color-stop( .46,  hsl(200,80%,45%) ), 
    color-stop( .54,  hsl(200,80%,45%) ), 
    color-stop( .56,  hsl(200,0%,15%) ), 
    color-stop( .58,  hsl(200,60%,29%) ), 
    
    color-stop( .8,    hsl(0,0%,25%) ), 
    color-stop( .82,  hsl(0,0%,29%) ), 
    color-stop( .84,  hsl(0,0%,22%) ), 
    color-stop( 1,     hsl(0,0%,15%) ) 
  );
}

.slider:active input[type="range"]::-webkit-slider-thumb {
  
  background-image: -webkit-gradient( linear, left top, right top,
    color-stop( 0,     hsl(0,0%,15%) ), 
    color-stop( .16,   hsl(0,0%,22%) ), 
    color-stop( .18,   hsl(0,0%,30%) ), 
    color-stop( .2,   hsl(0,0%,26%) ), 
    
    color-stop( .42,  hsl(0,0%,30%) ), 
    color-stop( .44,  hsl(0,0%,45%) ), 
    color-stop( .46,  hsl(200,100%,12%) ), 
    color-stop( .54,  hsl(200,100%,12%) ), 
    color-stop( .56,  hsl(0,0%,45%) ), 
    color-stop( .58,  hsl(0,0%,30%) ), 
    
    color-stop( .8,    hsl(0,0%,26%) ), 
    color-stop( .82,  hsl(0,0%,30%) ), 
    color-stop( .84,  hsl(0,0%,22%) ), 
    color-stop( 1,     hsl(0,0%,15%) ) 
  );
  
}

.slider:active input[type="range"] {
  
  
  background-image: -webkit-gradient( linear, left top, right top,
    color-stop( 0,     hsl(200,80%,45%) ), 
    color-stop( .08,   hsl(200,80%,15%) ), 
    color-stop( .5,   hsl(200,80%,0%) ), 
    color-stop( .92,  hsl(200,80%,15%) ), 
    color-stop( 1,     hsl(200,80%,45%) ) 
  );
  
  -webkit-box-shadow: inset #000 1px 1px 1px, inset #000 -1px -1px 1px;

}

/* Icons */

.slider:before, .slider:after { 
  content: "";
  font: 30px/0 'Pictos', sans-serif;
  text-shadow:   rgba(255,255,255,0.08) 0 1px 0;
  vertical-align: -20%;
  
  display: inline-block;
  position: relative;
  margin: 0 10px;
}

.slider:before { content: "-"; }
.slider:after { content: "+"; }

Pop out