A select dropdown rebuilt with CSS3/JS/HTML5.

How To Use

Zip Download

First, include the jQuery, JS, and CSS in your page. You should load the JS at the bottom of the body, so it doesn't block content rendering, but the CSS should be loaded in the head.

<link rel="stylesheet" type="text/css" href="selectTagRebuild/content/selectTagRebuild.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript" src="selectTagRebuild/scripts/selectTagRebuild.min.js"></script>

Then include the select tag rebuild where you want it on the page.

<div data-type="STC" class="SelectTagRebuild">
  <div data-type="STA" class="STSelectArea IEgradient">
    Categories <!--This is the placeholder before the user selects an option from the dropdown-->
    <div data-type="STBtn" class="STTag IEgradient">
      <div class="STTarrows"></div>
  <div data-type="STDD" class="STDropDown">
    <a href="#" class="STDDO" data-value="val1">Hello</a>
      <!--options in the drop downs can be links-->
    <div class="STDDO" data-value="val2">This</div>
      <!--or just divs-->
    <div class="STDDO" data-value="val3">Is Random</div>
    <div class="STDDO" data-value="val4">Text Lorem Ipsum</div>
    <div class="STDDO" data-value="val6">Value</div>
Is Random
Text Lorem Ipsum

You can then change the placeholder and add or remove .STDDO's as needed.


This plugins is not licensed. Use it as you will. Please don't claim my work as your own unless you modify it, but feel free to use it however you like.