A Pen by Stéphan Zych

Thumbnail
This awesome code was written by monkeymonk, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright monkeymonk ©
  • HTML
  • CSS
  • JavaScript
    <ul>
  
		
		<!-- meter -->
		<li>
			<meter value="0.3"></meter>
			<meter value="0.2"></meter>
			<meter value="0.16"></meter>
			<meter value="0.2"></meter>
			<meter value="0.3"></meter>
		</li>

		
		<!-- range -->
		<li>
			<input type="range" />
		</li>
		
		
		<!-- checkbox -->
		<li>
			<input type="checkbox" data-icon1="♀" data-icon2="♂" />
		</li>
		
		
		<!-- number -->
		<li>
			<input type="number" min="1" max="99" value="78" />
		</li>
		
		
		<!-- radio -->
		<li>
			<input type="radio" name="radio" data-icon="❮❮" /><input type="radio" name="radio" data-icon="►" /><input type="radio" name="radio" data-icon="❯❯" />
		</li>
		
		
        <!-- progress -->
        <li>
        	<progress value="0.3"></progress>
        </li>
		
	
	</ul>


<!-- Footer --------------------------------------- -->
    
    <div id="footer">
        
        <h1>umbrUI - appearance:none styling</h1>
        <nav class="links">
            <a href="http://simurai.com/post/1155924231/css3-appearance-none">Info</a>
            <a href="https://github.com/simurai/umbrUI">Source</a>
        </nav>
</div>

/*Downloaded from https://www.codeseek.co/monkeymonk/a-pen-by-standxe9phan-zych-xZRbyK */
    /* This is just the basic styling for the whole page. */

/* Global ------------------------------------------------------ */

html {
	font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
	background-color: hsl(200,5%,15%);
	background-size: 5px 5px;
	background-image:   -webkit-linear-gradient( 45deg, hsla(0,0%,0%,0) 0px, 
	                                                    hsla(0,0%,0%,.10) 50%, 
	                                                    hsla(0,0%,0%,0) 100% );
    }

body {
    margin: 0;
    }



/* list ------------------------------------------------------ */

ul {
    list-style: none;
    padding: 50px 0;
	margin: 0;
	font-size: 2em;
	text-align: center;
	background-image:   -webkit-linear-gradient( 0deg, 	hsla(0,0%,100%,0) 0px, 
														hsla(0,0%,100%,.09) 50%,
														hsla(0,0%,100%,0) 100% );
	
    }

ul li {
	display: inline-block;
	margin: 50px;
	vertical-align: middle;
 	}


@import url(https://fonts.googleapis.com/css?family=Terminal+Dosis);


/* Footer ------------------------------------------------------ */

#footer {
    padding: 30px;
    
    font: 13px/18px 'Terminal Dosis', sans-serif;
    text-align: center;
    
    box-shadow: inset 0 2px 5px hsla(0,0%,0%,.5);
    }


#footer > h1 {
	margin: 0;
	color: hsla(0,0%,25%,1);
	font-size: 20px;
	line-height: 1.5em;
	font-weight: 500;
	white-space: nowrap;
    }

#footer a {
    display: inline-block;
	color: hsl(312, 100%, 76%);
	margin: 0 8px;
	font-size: 16px;
	line-height: 1.2em;
	font-weight: 500;
	font-style: normal;
	text-decoration: none;
    }
#footer a:hover {
	color: hsl(312, 100%, 90%);
    }
#footer a:active {
	color: hsl(312, 50%, 50%);
    }



/* 
 * umbrUI meter input by @simurai
 */



/* -------------- meter -------------- */

meter:nth-child(1) { -webkit-transform: translate(-50px,  50px) rotate(-90deg); }
meter:nth-child(2) { -webkit-transform: translate( -25px,  25px) rotate(-90deg); }
meter:nth-child(3) { -webkit-transform: translate(   0px,   0px) rotate(-90deg); }
meter:nth-child(4) { -webkit-transform: translate(  25px, -25px) rotate(-90deg); }
meter:nth-child(5) { -webkit-transform: translate( 50px, -50px) rotate(-90deg); }


meter {
	-webkit-appearance: none;
	position: relative;
    display: block;
    margin: 8px auto;
	width: 100px;
	height: 17px;
	border-radius: 5px; 	
	padding: 4px 5px 4px 5px;
    box-sizing: border-box;   
    background: #000;
	-webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,.08);
	-webkit-transform-origin: center 8px;																		
    }


meter::-webkit-meter-bar {
    background-color: hsl(200,10%,14%);
    background-size: 2px 5px;
    background-image: 	-webkit-linear-gradient( 0deg,  hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),
    		            -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );	
    }


meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
    background-size: inherit;
    background-image: 	inherit;
    -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4);
    -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);
    }


/* With these pseudo selectors you could change the colors when changing the value. */
meter::-webkit-meter-optimum-value           { background-color: hsl(200,100%,50%); }
meter::-webkit-meter-suboptimum-value        { background-color: hsl(200,100%,50%); }
meter::-webkit-meter-even-less-good-value    { background-color: hsl(200,100%,50%); }


meter:hover::-webkit-meter-optimum-value,
meter:hover::-webkit-meter-suboptimum-value,
meter:hover::-webkit-meter-even-less-good-value {
	/*In the real world, just change the element's value, this is just a hack for this demo.*/
	width: 100% !important;
	-webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1);
    }


/* 
 * umbrUI range slider by @simurai
 */


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

input[type="range"] {
	-webkit-appearance:	none;	/* Remove Safari default */
	outline: none;
	width: 250px;
	height: 5px;
	border-radius: 1px;
	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,100%,50%) ), 
		color-stop( .54,	hsl(200,100%,50%) ), 
		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.15) ));
}

input[type="range"]:hover {
	
	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;

}



/* 
 * umbrUI checkboxes by @simurai
 * Usage: <input type="checkbox" data-icon1="P" data-icon2="v" /> 	
 */


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


input[type="checkbox"] {
	-webkit-appearance:none;	/* Remove Safari default */
	outline: none;
	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: bold 22px/32px 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);
  transition: all ease-out 200ms;
}

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: hsl(200,100%,50%);
	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;					
}

/* 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 number input by @simurai
 */

@import url(https://fonts.googleapis.com/css?family=VT323);


/* -------------- number -------------- */

input[type="number"] {
	-webkit-appearance:	none;
	outline: none;
	position: relative;
	z-index: 1;
	
	width: 120px;
	height: 60px;
    border-radius: 40px / 60px;    
	
	font-family: 'VT323', cursive;
	font-size: 36px;
	line-height: 40px;
	text-align: center;
	-webkit-font-smoothing: none;
	color: hsl(200,100%,50%);
	text-shadow: 0 -1px 0px hsla(200,100%,70%,1), 0 1px 0px hsla(0,0%,0%,.8), 0 0 13px hsl(200,100%,50%);
	
	border: 0;
	
	background-color: hsl(200,10%,12%);
	background-size: 4px 4px;
	background-image: 	-webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ),
						-webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% );	
		
	-webkit-box-shadow: inset 0 0 0 4px hsla(0,0%,0%,1),
						inset 0 0 20px 5px hsla(0,0%,0%,.5),
						0 0px 0px 1px hsla(0,0%,0%,.4),
						0 1px 0 hsla(0,0%,100%,.25);																				
}


/* Outer spin only works in Safari, so lets hide it */
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }


/* Spin button */
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    width: 32px;
    border-radius: 40px / 60px;    
    border: 4px solid #000;
    cursor: ns-resize;
    
    -webkit-box-shadow: inset 0px 0px 3px 1px hsla(0,0%,0%,.6),
    					inset 0px 6px 1px -2px hsla(0,0%,100%,.30),
    					inset 0px -7px 1px -1px hsla(0,0%,0%,.5);
    
    background-color: hsl(0,0%,20%);
    background-image: 
    				
    				-webkit-radial-gradient( 50% 5%, contain, 	hsla(0,0%,100%,.2) 0%, hsla(0,0%,0%,0) 70% ),
    				-webkit-radial-gradient( 50% 86%, contain, 	hsla(0,0%,100%,.05) 0%, hsla(0,0%,0%,0) 80% ),
    				-webkit-linear-gradient( -90deg, 	hsl(0,0%,15%) 0%, 
    													hsl(0,0%,18%) 48%,
    													hsl(0,0%,10%) 48%,
    													hsl(0,0%,27%) 52%, 
    													hsl(0,0%,20%) 52%, 
    													hsl(0,0%,34%) 100% );
        													
    -webkit-transition: border-color .2s ease-in-out;
}


/* :active */

input[type="number"]:active::-webkit-inner-spin-button {
	border-color: hsla(200,100%,50%,1);
	-webkit-box-shadow: inset 0px 0px 3px 1px hsla(200,100%,20%,.6),
						inset 0px 6px 1px -2px hsla(200,100%,70%,.4),
						inset 0px -7px 1px -1px hsla(200,100%,10%,.5),
						0px 0px 4px 3px hsla(200,100%,50%,.3);
    
    -webkit-transition: none;													
}



/* 
 * umbrUI radio buttons by @simurai
 */



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

input[type="radio"] {
	-webkit-appearance:none;	/* Remove Safari default */
	outline: none;
	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 sans-serif;
	text-shadow: 	rgba(255,255,255,0.08) 0 -1px 0;
	line-height: 	40px;
	
	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);
	
  transition: all ease-in-out 120ms;
}


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 */


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-box-shadow: 0px 2px 1px 1px hsl(0,0%,13%);						
	-webkit-transform: rotateX(-25deg) scaleX(.95) translateY(4px);
}

input[type="radio"]:checked:before {
	color: hsl(200,100%,50%);
	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%) )
	);
}


/* 
 * umbrUI progress input by @simurai
 */



/* -------------- progress -------------- */

progress {
	-webkit-appearance: none;
	position: relative;
	width: 150px;
	height: 17px;
	border-radius: 5px; 	
	padding: 4px;   
    background: #000;
	-webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1);
    
    /*Disabled for now.
    -webkit-box-reflect: below -3px -webkit-radial-gradient( 50% 70%, 50% 25%, hsla(0,0%,0%,.2) 0%, hsla(0,0%,0%,0) 95% );*/
    }


progress::-webkit-progress-bar {
    background-color: hsl(200,10%,14%);
    background-size: 2px 5px;
    background-image: 	-webkit-linear-gradient( 0deg,  hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),
    		            -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );	
    }


progress::-webkit-progress-value {
    background-size: inherit;
    background-image: 	inherit;
    background-color: hsl(200,100%,50%);
    -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4);
    -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);
    }


progress:hover::-webkit-progress-value {
	/*In the real world, just change the element's value, this is just a hack for this demo.*/
	width: 100% !important;
	-webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1);
    }




/*Downloaded from https://www.codeseek.co/monkeymonk/a-pen-by-standxe9phan-zych-xZRbyK */
    

Comments