<h1>Pure CSS "select" kinda box</h1>

<p id="fake-label" style="float:left;margin: 40px 20px 0 0;font-size:40px;">Pick your favorite Photoshop Tool: </p>
<div class="wrapper">
  <fieldset aria-labelledby="fake-label">
    <legend>Photoshop Tools</legend>
    <input type="radio" name="tools" id="Layer-Styles-Tool" value="Layer Styles Tool" />
    <label for="Layer-Styles-Tool">
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/177543-200.png" alt=""> Layer Styles ToolLayer Styles Tool
    </label>
    <input type="radio" name="tools" id="Red-Eye-Tool" value="Red Eye Tool" />
    <label for="Red-Eye-Tool">
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/177530-200.png" alt=""> Red Eye Tool
    </label>
    <input type="radio" name="tools" id="Paths" value="Paths" />
    <label for="Paths">
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/177522-200.png" alt=""> Paths
    </label>
    <input type="radio" name="tools" id="Rotate-View-Tool" value="Rotate View Tool" />
    <label for="Rotate-View-Tool">
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/177525-200.png" alt=""> Rotate View Tool
    </label>
    <input type="radio" name="tools" id="Polygonal-Lasso-Tool" value="Polygonal Lasso Tool" />
    <label for="Polygonal-Lasso-Tool">
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/177528-200.png" alt=""> Polygonal Lasso Tool
    </label>
    <input type="radio" name="tools" id="3D-Object-Scale-Tool" value="3D Object Scale Tool" />
    <label for="3D-Object-Scale-Tool">
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/177462-200.png" alt=""> 3D Object Scale Tool
    </label>
    <input type="radio" name="tools" id="Layers" value="Layers" />
    <label for="Layers">
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/177502-200.png" alt=""> Layers
    </label>
    <input type="radio" name="tools" id="Gradient-Tool" value="Gradient-Tool" />
    <label for="Gradient-Tool">
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/177495-200.png" alt=""> Gradient Tool
    </label>
    <input type="radio" name="tools" id="histogram" value="histogram" />
    <label for="histogram">
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/177498-200.png" alt=""> histogram
    </label>

  </fieldset>

</div>


<p style="margin-top:50px;">This is a proof of concept following my <a href="http://cssmojo.com/pure-css-tab-panel/">previous radio button hack</a>&mdash;please don't run with it.</p>
<dl>
  <dt>Things I like:</dt>
  <dd>It is accessible without JavaScript nor CSS.</dd>
  <dd>Keybaord users can navigate through the "options" using arrow keys.</dd>
  <dd>Keybaord users can leave the "options" by simply tabbing out of the fieldset (versus having to validate an option in a normal select box).</dd>
  <dd>The selected item is flagged.</dd>
  <dd>It is easy to customize.</dd>
  <dt>Things I don't like:</dt>
  <dd>Clicking on an "option" does not close the popup, users need to move the mouse out of it.</dd>
  <dd>What looks like a label is not a label (clicking on "Pick your favorite Photoshop Tool" won't focus on the "select").</dd>
  <dd>The <strong>visual</strong> representation does not match the native pattern (it looks like a select but it is a fieldset with radio buttons).</dd>
</dl>
<hr>
<p>Credit: Photoshop Tools icons are from <a href="https://thenounproject.com/failureiscool/collection/photoshop-tools/">Fabiano Coelho</a></p>


<style>
  body {font: 20px/1.5 serif;}
  dt {font-weight: bold;margin-top: 30px;}
</style>
/**
 * Hiding (visually) legend and radio buttons
 * https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
 */

legend,
input[type="radio"] {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.wrapper {
  position: relative;
  display: inline-block;
}

fieldset {
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border: 0;
  padding: 0;
  font-family: sans-serif;
}

fieldset:before,
fieldset:after {
  content: "";
  position: absolute;
  right: 20px;
  border: 20px solid transparent;
  z-index: 3;
}

fieldset:before {
  bottom: 20px;
}

fieldset:after {
  top: 20px;
}


/**
 * setting heights/width/font-size
 */

.wrapper {
  width: 720px;
  line-height: 130px;
  height: 130px;
}

fieldset {
  font-size: 50px;
  width: 720px;
}

fieldset:hover {
  /* to show 3 lines max (3 x 130px) */
  height: 390px;
}

label {
  padding-right: 72px;
  width: 720px;
}

label img {
  height: 100px;
}


/** 
 * setting colors
 */

fieldset {
  outline: 2px solid #fff;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 1), 0 0 0 9px rgba(0, 0, 0, .2);
}


/* arrows */

fieldset:before {
  border-top-color: #555;
}

fieldset:after {
  border-bottom-color: #555;
}

label {
  background-image: linear-gradient(to bottom, #fff, #f1f1f1);
  color: #777;
  border: 1px solid #ececec;
}

fieldset label:hover {
  background: #ececec;
  color: #555;
}


/* visual cue for keyboard user */

input[type="radio"]:focus + label {
  border: 1px dotted #555;
}

label {
  position: absolute;
  box-sizing: border-box;
  /* because we kill position:absolute on mouseover */
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

label img {
  width: auto;
  vertical-align: middle;
  margin-right: 10px;
}

input[type="radio"]:checked + label {
  z-index: 1;
}


/**
 * mouseover stuff
 */

fieldset:hover {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
}

fieldset:hover label {
  position: relative;
}

fieldset:hover:before,
fieldset:hover:after {
  display: none;
}

fieldset:hover input[type="radio"]:checked + label:after {
  content: "";
  background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/16645-200.png);
  background-size: cover;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 40px;
  right: 25px;
  z-index: 10;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.