HTML & CSS Timepicker (No Js) - Final Version

html-css-timepicker-no-js-final-version.markdown

HTML & CSS Timepicker (No Js) - Final Version

This pen simulates a functional timepicker using HTML semantic elements and CSS3 super-powers.

Problem Statement: The challenge was to create an interactive timepicker (showing behaviour, usually done by javascript) where user can choose between hours and minutes by clicking on it different base sections.

Solution: Using html radio input elements and css3 animations, i have tried to simulate a functional timepicker.

A Pen by Jan Kuri on CodePen.

License.

index.html

<!-- Root page wrappper -->
<div class="page">
  <div class="page-container">
        
	<!-- Timepicker widget root element (tp = Timepicker)-->
    <div class="widget widget--tp">
		
		<!-- tp footer element -->
       <div class="tp-wrap tp-footer"></div>
		  
		  <!-- tp footer radio buttons & text -->
       <input class="tp-base tp-base--handle tp-hour--handle" type="radio" name="base-handle" checked value="">
       <span class="tp-base tp-base--text tp-hour"></span>
		   <span class="tp-base tp-colon">:</span>
       <input class="tp-base tp-base--handle tp-min--handle" type="radio" name="base-handle" value="">
       <span class="tp-base tp-base--text tp-min"></span>
		  
		  <!-- tp root hour & mins. section -->
       <div class="tp-wrap tp-section tp-section--hour"></div>
       <div class="tp-wrap tp-section tp-section--min"></div>
		  
       <input class="tp-item item-handle item-handle--hour item-handle--hour-1 item-handle-1" type="radio" name="hour-handle" value="" checked >
		   <div class="tp-item item-text item-text-1 item-text--hour item-text--hour-1">12</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-2 item-handle-2" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-2 item-text--hour item-text--hour-2">1</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-3 item-handle-3" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-3 item-text--hour item-text--hour-3">2</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-4 item-handle-4" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-4 item-text--hour item-text--hour-4">3</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-5 item-handle-5" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-5 item-text--hour item-text--hour-5">4</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-6 item-handle-6" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-6 item-text--hour item-text--hour-6">5</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-7 item-handle-7" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-7 item-text--hour item-text--hour-7">6</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-8 item-handle-8" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-8 item-text--hour item-text--hour-8">7</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-9 item-handle-9" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-9 item-text--hour item-text--hour-9">8</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-10 item-handle-10" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-10 item-text--hour item-text--hour-10">9</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-11 item-handle-11" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-11 item-text--hour item-text--hour-11">10</div>
		   <input class="tp-item item-handle item-handle--hour item-handle--hour-12 item-handle-12" type="radio" name="hour-handle" value="" >
		   <div class="tp-item item-text item-text-12 item-text--hour item-text--hour-12">11</div>
		  
		  <!-- tp root min section -->
		  <input class="tp-item item-handle item-handle--min item-handle--min-1 item-handle-1" type="radio" name="min-handle" value="" checked >
		  <div class="tp-item item-text item-text-1 item-text--min item-text--min-1">00</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-2 item-handle-2" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-2 item-text--min item-text--min-2">5</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-3 item-handle-3" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-3 item-text--min item-text--min-3">10</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-4 item-handle-4" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-4 item-text--min item-text--min-4">15</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-5 item-handle-5" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-5 item-text--min item-text--min-5">20</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-6 item-handle-6" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-6 item-text--min item-text--min-6">25</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-7 item-handle-7" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-7 item-text--min item-text--min-7">30</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-8 item-handle-8" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-8 item-text--min item-text--min-8">35</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-9 item-handle-9" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-9 item-text--min item-text--min-9">40</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-10 item-handle-10" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-10 item-text--min item-text--min-10">45</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-11 item-handle-11" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-11 item-text--min item-text--min-11">50</div>
		  <input class="tp-item item-handle item-handle--min item-handle--min-12 item-handle-12" type="radio" name="min-handle" value="" >
		  <div class="tp-item item-text item-text-12 item-text--min item-text--min-12">55</div>
			
		  <!-- tp arms (hour & mins)-->
		  <div class="tp-arms">
		    <div class="tp-arms-item tp-arms-hour"></div>
			<div class="tp-arms-item tp-arms-min"></div>
		  </div>
			
		  <!-- tp hidden footer text -->
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-1">12</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-2">01</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-3">02</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-4">03</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-5">04</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-6">05</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-7">06</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-8">07</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-9">08</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-10">09</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-11">10</span>
      <span class="tp-base tp-base--text tp-hour tp-base--hidden tp-hour-item-12">11</span>
			
		  <!-- tp hidden footer text -->
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-1">00</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-2">05</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-3">10</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-4">15</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-5">20</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-6">25</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-7">30</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-8">35</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-9">40</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-10">45</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-11">50</span>
      <span class="tp-base tp-base--text tp-min tp-base--hidden tp-min-item-12">55</span>
		  
    </div>
  </div>
</div>

script.js

/*
 * HTML & CSS Timepicker (No Js) - Final Version
 * @author Zahin Omar Alwa
 *
 * A functional timepicker simulation using pure html * semantic elements and css3 goodies !
 */

style.css

/*Meyer reset.css with some modifications*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;box-sizing:border-box;position:relative;outline:0;font-size:100%;vertical-align:baseline;background:transparent}

/*Generic animation keyframes*/
@keyframes ease-out-scale {
  0% {
    opacity: 0;
    transform: scale(0);
	  z-index: 11
  }
  100% {
    opacity: 1;
    transform: scale(1);
	  z-index: 11
  }
}
@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translate(40%, 0);
	  z-index: 11
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
	  z-index: 11
  }
}
@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translate(-40%, 0);
	  z-index: 11
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
	  z-index: 11
  }
}

body,
html,
.page {
  background: url(http://www.bradysammons.com/codepen/darkui/noise.png);
  height: 100%;
  width: 100%
}
body {
  color: #757575;
  font: 14px/1 "Roboto", sans-serif;
  text-align: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}

/*Timepicker: utility rules*/
.tp-hide {
  display: none
}

/*Timepicker: page content*/
.page .page-container {
  margin: 0 auto;
  padding: 2%;
  width: 96%
}
/*Timepicker: Root widget*/
.page .widget {
  background: #373738;
  box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 15px 18px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  height: 450px;
  margin: inherit;
  width: 460px
}
.widget--tp .tp-wrap {
  width: 100%
}
/*Timepicker: widget footer*/
.widget--tp .tp-footer{
  background: #373738;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
  bottom: 0;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0
}
/*Timepicker: widget footer buttons*/
.widget--tp .tp-base {
  bottom: 5px;
  left: 51%;
  position: absolute
}
.widget--tp .tp-base--text {
  background: linear-gradient(to bottom, rgba(46,46,46,1) 0%,rgba(34,34,34,1) 100%);
  border: 1px solid #141414;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.2) inset;
  color: #bcbcbc;
  font: 2.2em/1.3 'Roboto', sans-serif;
  height: 40px;
  text-shadow: 0 2px 0 #555;
  width: 40px
}
.widget--tp .tp-base--handle {
  cursor: pointer;
  bottom: 2px;
  height: 45px;
  margin: 6px 0 0;
  opacity: 0;
  width: 45px;
  z-index: 100
}
.widget--tp .tp-hour,
.widget--tp .tp-hour--handle {
  left: 39%
}
.widget--tp .tp-colon {
  color: #fff;
  left: 48.35%;
  font: 2.2em/1.4 'Roboto', sans-serif
}
/*Timepicker: widget generic hour and min section*/
.widget--tp .tp-section {
  background: url(http://www.bradysammons.com/codepen/darkui/noise.png) repeat;
  height: 85%;
  margin: 8px 5px;
  opacity: 0;
  position: absolute;
  width: 98%;
  transition: all .3s ease-out
}

/*
 * Timepicker: widget root sections & child elements lazy anims
 */
.tp-hour--handle:checked ~ .tp-section--hour {
  animation: slide-in-left 0.3s 0.3s 1 ease-in-out forwards
}
.tp-min--handle:checked ~ .tp-section--min {
  animation: slide-in-right 0.3s 0.3s 1 ease-in-out forwards
}
.tp-hour--handle:checked ~.item-text--hour-1,
.tp-min--handle:checked ~ .item-text--min-1,
.tp-hour--handle:checked ~ .item-text--hour-4,
.tp-min--handle:checked ~ .item-text--min-4,
.tp-hour--handle:checked ~ .item-text--hour-7,
.tp-min--handle:checked ~ .item-text--min-7,
.tp-hour--handle:checked ~ .item-text--hour-10,
.tp-min--handle:checked ~ .item-text--min-10 {
  animation: ease-out-scale 0.5s 0.5s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
}
.tp-hour--handle:checked ~ .item-text--hour-2,
.tp-min--handle:checked ~ .item-text--min-2,
.tp-hour--handle:checked ~ .item-text--hour-6,
.tp-min--handle:checked ~ .item-text--min-6,
.tp-hour--handle:checked ~ .item-text--hour-8,
.tp-min--handle:checked ~ .item-text--min-8,
.tp-hour--handle:checked ~ .item-text--hour-12,
.tp-min--handle:checked ~ .item-text--min-12 {
  animation: ease-out-scale 0.5s 1s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
}
.tp-hour--handle:checked ~ .item-text--hour-3,
.tp-min--handle:checked ~ .item-text--min-3,
.tp-hour--handle:checked ~ .item-text--hour-5,
.tp-min--handle:checked ~ .item-text--min-5,
.tp-hour--handle:checked ~ .item-text--hour-9,
.tp-min--handle:checked ~ .item-text--min-9,
.tp-hour--handle:checked ~ .item-text--hour-11,
.tp-min--handle:checked ~ .item-text--min-11 {
  animation: ease-out-scale 0.5s 1.5s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
}
.tp-hour--handle:checked ~ .item-handle--hour,
.tp-min--handle:checked ~ .item-handle--min {
  z-index: 100 !important
}

/*Timepicker: generic hour & min blocks*/
.widget--tp .tp-item {
  cursor: pointer;
  height: 35px;
  left: 0;
  position: absolute;
  top: 0;
  width: 35px
}
.widget--tp .item-text {
  background: linear-gradient(to bottom, rgba(46,46,46,1) 0%,rgba(34,34,34,1) 100%);
  border: 1px solid #141414;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.2) inset;
  color: #bcbcbc;
  border-radius: 50%;
  font: 300 1.3em/1.8 'Roboto', sans-serif;
  opacity: 0;
  text-shadow:0 1px 0 rgba(0,0,0,.6)
}
/*Timepicker: root sections hour & mins buttons alignment*/
.widget--tp .item-handle-1,
.widget--tp .item-text-1 { left: 45%; top: 3% }
.widget--tp .item-handle-7,
.widget--tp .item-text-7 { left: 45%; top: 75% }
.widget--tp .item-handle-2,
.widget--tp .item-text-2 { left: 62%; top: 10% }
.widget--tp .item-handle-6,
.widget--tp .item-text-6 { left: 62%; top: 68% }
.widget--tp .item-handle-12,
.widget--tp .item-text-12 { left: 28%; top: 10% }
.widget--tp .item-handle-8,
.widget--tp .item-text-8 { left: 28%; top: 68% }
.widget--tp .item-handle-3,
.widget--tp .item-text-3 { left: 74%; top: 25% }
.widget--tp .item-handle-11,
.widget--tp .item-text-11 { left: 16%; top: 25% }
.widget--tp .item-handle-5,
.widget--tp .item-text-5 { left: 74%; top: 53% }
.widget--tp .item-handle-9,
.widget--tp .item-text-9 { left: 16%; top: 53% }
.widget--tp .item-handle-4,
.widget--tp .item-text-4 { left: 82%; top: 40% }
.widget--tp .item-handle-10,
.widget--tp .item-text-10 { left: 8%; top: 40% }
.widget--tp .item-handle {
  margin: 0 2px 0 0;
  opacity: 0;
  z-index: -100
}

/*Timepicker: section child button click logic*/
.widget--tp .tp-base.tp-base--hidden{
  background: none;
  color: #fff;
  border: none;
  box-shadow: none;
  opacity: 0;
  text-shadow: none
}
.widget--tp .item-handle--hour-1:checked ~ .tp-hour-item-1,
.widget--tp .item-handle--min-1:checked ~ .tp-min-item-1,
.widget--tp .item-handle--hour-2:checked ~ .tp-hour-item-2,
.widget--tp .item-handle--min-2:checked ~ .tp-min-item-2,
.widget--tp .item-handle--hour-3:checked ~ .tp-hour-item-3,
.widget--tp .item-handle--min-3:checked ~ .tp-min-item-3,
.widget--tp .item-handle--hour-4:checked ~ .tp-hour-item-4,
.widget--tp .item-handle--min-4:checked ~ .tp-min-item-4,
.widget--tp .item-handle--hour-5:checked ~ .tp-hour-item-5,
.widget--tp .item-handle--min-5:checked ~ .tp-min-item-5,
.widget--tp .item-handle--hour-6:checked ~ .tp-hour-item-6,
.widget--tp .item-handle--min-6:checked ~ .tp-min-item-6,
.widget--tp .item-handle--hour-7:checked ~ .tp-hour-item-7,
.widget--tp .item-handle--min-7:checked ~ .tp-min-item-7,
.widget--tp .item-handle--hour-8:checked ~ .tp-hour-item-8,
.widget--tp .item-handle--min-8:checked ~ .tp-min-item-8,
.widget--tp .item-handle--hour-9:checked ~ .tp-hour-item-9,
.widget--tp .item-handle--min-9:checked ~ .tp-min-item-9,
.widget--tp .item-handle--hour-10:checked ~ .tp-hour-item-10,
.widget--tp .item-handle--min-10:checked ~ .tp-min-item-10,
.widget--tp .item-handle--hour-11:checked ~ .tp-hour-item-11,
.widget--tp .item-handle--min-11:checked ~ .tp-min-item-11,
.widget--tp .item-handle--hour-12:checked ~ .tp-hour-item-12,
.widget--tp .item-handle--min-12:checked ~ .tp-min-item-12 {
  animation: ease-out-scale 0.3s 0.3s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
}

/*Timepicker: hour and min arms block*/
/******Absolute Centering technique******/
.widget--tp .tp-arms {
  animation: ease-out-scale 0.5s 2s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  background: linear-gradient(to bottom, rgba(46,46,46,1) 0%,rgba(34,34,34,1) 100%);
  border: 1px solid #141414;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.2) inset;
  bottom: 0;
  height: 15px;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  top: 0;
  width: 15px
}
/*Timepicker: hour & mins arms */
.widget--tp .tp-arms > .tp-arms-item {
  background: linear-gradient(to bottom, rgba(46,46,46,1) 0%, rgba(34,34,34,1) 100%);
  border: 1px solid #141414;
  left: 42%;
  height: 5px;
  position: absolute;
  top: 45%;
  transform-origin: left top;
  transform: rotate(-90deg);
  transition: transform .6s .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 550%
}
.widget--tp .tp-arms > .tp-arms-min {
  width: 800%
}
/*Timepicker: arms movement on hour & min blocks click logic*/
.item-handle--hour-1:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-1:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(-90deg)
}
.item-handle--hour-2:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-2:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(-64deg)
}
.item-handle--hour-3:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-3:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(-35deg)
}
.item-handle--hour-4:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-4:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(-10deg)
}
.item-handle--hour-5:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-5:checked ~ .tp-arms > .tp-arms-min  {
  transform: rotate(13deg)
}
.item-handle--hour-6:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-6:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(50deg)
}
.item-handle--hour-7:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-7:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(90deg)
}
.item-handle--hour-8:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-8:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(130deg)
}
.item-handle--hour-9:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-9:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(165deg)
}
.item-handle--hour-10:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-10:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(185deg)
}
.item-handle--hour-11:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-11:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(210deg)
}
.item-handle--hour-12:checked ~ .tp-arms > .tp-arms-hour,
.item-handle--min-12:checked ~ .tp-arms > .tp-arms-min {
  transform: rotate(240deg)
}

/*Timepicker: generic buttons user interaction*/
input[type=radio] + .tp-item,
input[type=radio] + .tp-base {
  transition: all .3s ease-in-out
}
input[type=radio]:hover + .tp-item,
input[type=radio]:hover + .tp-base,
input[type=radio]:focus + .tp-item,
input[type=radio]:focus + .tp-base{
  background: linear-gradient(to bottom, rgba(64,64,64,1) 0%,rgba(47,47,47,1) 100%);
  border-color: #222;
  color: #d0d0d0;
  text-shadow:0 1px 0 rgba(0,0,0,.7)
}
input[type=radio]:active + .tp-item,
input[type=radio]:active + .tp-base,
input[type=radio]:checked + .tp-item,
input[type=radio]:checked + .tp-base {
  background: linear-gradient(to bottom, rgba(23,23,23,1) 0%, rgba(40,40,40,1) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.8) inset;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0,0,0,.3)
}