How to create a styled drop-down list using CSS3

The major problem of ordinary drop-down lists (select tags) in HTML is their inability to be styled with CSS styles. This article demonstrates a drop-down list which is made of HTML elements such as label, div and input which, in turn, can be easily styled with CSS.

Let's begin with HTML structure. The drop-down list is div element with class "drop-down-list" which consists of sets of elements input and label. Each set is an option in the drop-down list except the first two which are used for default titles in the drop-down list when it is either opened or closed.

Here is HTML code:

<div class="drop-down-list">
  <input id="list-item-active" class="active" name="PostVariable" value="0" type="radio">
  <input id="list-item-inactive" class="inactive" name="PostVariable" value="0" type="radio" checked>
  <label for="list-item-active" class="active">Click to open a list!</label>
  <label for="list-item-inactive" class="inactive">Choose an item from the list!</label>
  <div>
    <input id="list-item1" name="PostVariable" value="1" type="radio">
    <label for="list-item1">Animated 3D button using only CSS3</label>
    <input id="list-item2" name="PostVariable" value="2" type="radio">
    <label for="list-item2">Simple content accordion using only CSS3</label>
    <input id="list-item3" name="PostVariable" value="3" type="radio">
    <label for="list-item3">Social media icons with animated tooltips using only CSS3</label>
  </div>
</div>

Here are minimal CSS styles which are required for the drop-down list to work:

.drop-down-list {
  position: relative;
  display: inline-block;
  height: 20px;
  text-align: left;
  width: 300px;
}

.drop-down-list input {
  display: none;
}

.drop-down-list div {
  position: absolute;
  max-height: 150px;
  overflow-y: auto;
  width: 100%;
}

.drop-down-list > input.active:checked ~ div label {
  display: block;
}

.drop-down-list > input.active:checked ~ div {
  top: 100%;
}

.drop-down-list > input.inactive:checked ~ div {
  display: none;
}

.drop-down-list > input.inactive:checked ~ label.active {
  opacity: 1;
}

.drop-down-list > input.active:checked ~ label.inactive {
  display: block;
}

.drop-down-list > input.active:checked ~ label.active {
  display: none;
}

.drop-down-list > label.active,
.drop-down-list > label.inactive {
  display: none;
}

.drop-down-list > label.active {
  display: block;
  opacity: 0;
  z-index: 10;
}

.drop-down-list > label {
  position: absolute;
  display: block;
  white-space: nowrap;
  width: 100%;
}

.drop-down-list div label {
  display: none;
  width: 100%;
}

.drop-down-list div input:checked + label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  z-index: 5;
}

Just click the default title to open a list of options and choose one in order to close the list. If you don't want to choose any option, just click the default title again and the list will close.

Live demo

Here are additional styles which can be added to the existing ones above to make the drop-down list look better:

.drop-down-list {
  display: inline-block;
  font-family: Arial;
  background-color: #CCCCCC;
  border-radius: 6px;
  color: #5E5E5E;
  height: 34px;
}

.drop-down-list > input:checked ~ div {
  border: 1px solid #CCCCCC;
  width: 94%;
  left: 3%;
}

.drop-down-list label,
.drop-down-list div label {
  font-size: 14px;
  line-height: 14px;
  padding: 10px 3%;
  width: 94%;
}

.drop-down-list div label {
  background-color: #F3F3F3;
}

.drop-down-list > label:after,
.drop-down-list div input:checked + label:after {
  display: block;
  background-color: #CCCCCC;
  content: url(icon.gif);
  padding: 0 10px;
  position: absolute;
  right: 0;
  top: 7px;
}

.drop-down-list div label:hover {
  background-color: #DFDFDF;
}

.drop-down-list div input:checked + label {
  background-color: transparent;
  overflow: hidden;
}

Live demo

The drop-down list in the example above works very well using only CSS3, but it has a very critical disadvantage. A list of options doesn't close itself automatically when you click out of the block with the drop-down list. There is no way to solve this problem using only CSS styles, but JavaScript can solve the problem.

Here is JavaScript code to solve the problem described above which is written with use of jQuery which means that JavaScript file with the core of jQuery must be connected to the page where the drop-down list is used.

jQuery( document ).ready( function() {
  jQuery( document ).click( function( event ) {
    target = jQuery( event.target );
    dropDownList = target.parents( '.drop-down-list' );
    if( dropDownList.length == 0 ) {
       jQuery( '.drop-down-list input.active:checked + input.inactive' ).attr( 'checked', 'checked' );
    } else {
      dropDownList.addClass( 'active' );
      jQuery( '.drop-down-list:not(.active) input.active:checked + input.inactive' ).attr( 'checked', 'checked' );
      dropDownList.removeClass( 'active' );
    }
  });
});

Live demo

The following archive contains the examples above:

styled_drop_down_list_using_css3.zip 80.54 kB