8#. Customizable select - "Design it & Code it"

by Dylan Schadeck

HTML

<div id="main" role="main">

  <h3>Default</h3>
  <div class="select">
    <input type="radio" name="action" value="" checked><label>Select</label>
    <div>
      <input type="radio" name="action" value="add"><label>Add</label>
      <input type="radio" name="action" value="edit"><label>Edit</label>
      <input type="radio" name="action" value="remove"><label>Remove</label>
    </div>
  </div>

  <h3>With .required class</h3>

  <div class="select red required">
    <input type="radio" name="action2" value="" checked><label>Select</label>
    <div>
      <input type="radio" name="action2" value="add"><label>Add</label>
      <input type="radio" name="action2" value="edit"><label>Edit</label>
      <input type="radio" name="action2" value="remove"><label>Remove</label>
    </div>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet neque nulla. Donec malesuada, nibh id commodo imperdiet, nunc mi rutrum odio, lobortis tempus leo mauris sed lectus. Maecenas vestibulum dapibus sagittis. Integer sit amet dui mi. Sed nec euismod quam. Pellentesque eget mauris tellus, commodo tristique mauris. Praesent commodo justo pulvinar leo pretium dapibus. Nulla tempor, nunc eget elementum consectetur, tellus dolor facilisis mi, a scelerisque augue arcu cursus arcu. Nunc tincidunt rhoncus purus, id cursus libero aliquet a.</p>

  <h3>With .rounded class</h3>

  <div class="select orange rounded">
    <input type="radio" name="action3" value="" checked><label>Select</label>
    <div>
      <input type="radio" name="action3" value="add"><label>Add</label>
      <input type="radio" name="action3" value="edit"><label>Edit</label>
      <input type="radio" name="action3" value="remove"><label>Remove</label>
    </div>
  </div>
</div>

CSS

/* ============================== */
/* Layout style ================= */
*:focus {outline: none;}

body { 
  background-image: url(http://dl.dropbox.com/u/20586331/DiCi/8.select/bg.png);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
  font-size: 12px;
  line-height: 22px;
  color: #777;
}
h3 {
    display: block;
    font-size: 1.17em;
    font-weight: bold;
    margin: 10px 0;
}
#main {
  -webkit-border-radius: 5px;
  -mox-border-radius: 5px;
  border-radius: 5px;
  background: #fff;
  width: 650px;
  padding: 20px;
  margin: 50px auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


/* ============================== */
/* Element style ================ */

.select {
  font-size: 11px;
  height: 30px;
  line-height: 30px;
  width: 200px;

  position: relative;
}
.select,
.select div {
  border-bottom: 1px solid #ccc;
  background: #f5f5f5;
  color: #bbb;
}
.select div { 
  width: 100%;
  border-width: 0;
}
.select:hover div {
  border-width: 1px; 
  position: absolute;
  z-index: 4;
  top: 30px;
}
/* Arrow */
.select:after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #bbb;
  content: '';
  height: 0;
  position: absolute;
  right: 10px;
  top: 12px;
  width: 0;
  z-index: 3;
}
.select label {
  height: 0;
  display: block;
  padding: 0 10px; 
  word-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.select input {
  max-height: 0;
  max-width: 0;
  filter:alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  cursor: pointer;
  position: absolute;
  z-index: 2;
}
.select input:checked + label { height: 30px; }
.select:hover input {
  min-height: 30px;
  min-width: 100%;
  height: 30px;
  width: 100%;
}
/* Change to ".select:hover div label" if you want to hide first option after select */
.select:hover label {
  height: 30px;
  line-height: 30px; 
  -ms-transition:.25s ease-in-out;
  -moz-transition:.25s ease-in-out;
  -o-transition:.25s ease-in-out;
 ...

JavaScript

/**
 *
 * 8#. Customizable select - "Design it & Code it"
 * Author: Idered <http://idered.pl>, IderedPL[at]gmail[dot]com
 *
 * Please don't repost source of this on websites, instead give a link.
 * No images used, except for body background.
 * Selectivizr is required by IE lower than 9.
 * Add your settings in "Custom styles" section.
 * Feel free to use as you want :)
 *
 */