Merchants Heart CSS - Iconic Radio

by Ben Clayton

HTML

<div class="control">
   <input data-google-map-category-filters id="google-map-category-1" name="google-map-categories" type="radio" value="Where To Buy" checked/>
   <label class="wtb" for="google-map-category-1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWdMW3Co0lk_YqDXpFcDWDsRw8axceppbGkNnbHE5165x7VQM9gw" />Where to Buy</label>
   <input data-google-map-category-filters id="google-map-category-2" name="google-map-categories" type="radio" value="Experience"/>
   <label class="exp" for="google-map-category-2">Experience<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWdMW3Co0lk_YqDXpFcDWDsRw8axceppbGkNnbHE5165x7VQM9gw" /></label>
  </div>

CSS

/* Structural CSS */

.control {
  font-size:0px;
  line-height:0px;
}

.control img {
  position: relative;
  top: 5px;
  width: 23px;
  height: 23px;
  visibility: hidden;
}

.control .wtb img {
  right: 0px;
  margin-right:10px;
}

.control .exp img {
  left: 0px;
  margin-left:10px;
}

.control #google-map-category-1:checked~label.wtb img {
  visibility: visible;
 }

 .control #google-map-category-2:checked~label.exp img {
  visibility: visible;
 }

.control .wtb {
  font-size: 16px;
  line-height: 20px;
  color: black;
  height: 20px;
  background-color: white;
  padding: 5px 10px 3px 0px;
  border: 1px solid black;
  border-bottom-left-radius: 15px 15px;
  border-top-left-radius: 15px 15px;
}

.control #google-map-category-1:checked~label.wtb {
  color: white;
  background-color: black;
 }

.control .exp {
  font-size: 16px;
  line-height: 20px;
  color: black;
  height: 20px;
  background-color: white;
  padding: 5px 0px 3px 10px;
  border: 1px solid black;
  border-bottom-right-radius: 15px 15px;
  border-top-right-radius: 15px 15px;
}

.control #google-map-category-2:checked~label.exp {
  color: white;
  background-color: black;
 }

.control input {
  display: none;
}