Home / Articles / Programming languages / Markup languages / HTML & CSS / How to create a styled drop-down list using CSS3

How to create a styled drop-down list using CSS3

How to create a styled drop-down list using CSS3
 
How to create a styled drop-down list using CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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:


 

Read also

Discussion (total 1 comments)

RocioXRuma
November 30, 2016 at 03:12 pm
Hi! Where I can download the XRumer 12? This URL is not working - http://freecheapxrumer.com/ :(

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation