Your Search Results

    Example 3

    This is the third example that explain how to build custom form widgets.

    Change states

    HTML Content

    <form class="no-widget">
      <select name="myFruit" tabindex="-1">
          <option>Cherry</option>
          <option>Lemon</option>
          <option>Banana</option>
          <option>Strawberry</option>
          <option>Apple</option>
      </select>
     
      <div class="select" tabindex="0">
        <span class="value">Cherry</span>
        <ul class="optList hidden">
          <li class="option">Cherry</li>
          <li class="option">Lemon</li>
          <li class="option">Banana</li>
          <li class="option">Strawberry</li>
          <li class="option">Apple</li>
        </ul>
      </div>
    </form>

    CSS Content

    .widget select,
    .no-widget .select {
      position : absolute;
      left     : -5000em;
      height   : 0;
      overflow : hidden;
    }
     
    /* --------------- */
    /* Required Styles */
    /* --------------- */
     
    .select {
      position: relative;
      display : inline-block;
    }
     
    .select.active,
    .select:focus {
      box-shadow: 0 0 3px 1px #227755;
      outline: none;
    }
     
    .select .optList {
      position: absolute;
      top     : 100%;
      left    : 0;
    }
     
    .select .optList.hidden {
      max-height: 0;
      visibility: hidden;
    }
     
    /* ------------ */
    /* Fancy Styles */
    /* ------------ */
     
    .select {
      font-size   : 0.625em; /* 10px */
      font-family : Verdana, Arial, sans-serif;
     
      -moz-box-sizing : border-box;
      box-sizing : border-box;
     
      padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
      width   : 10em; /* 100px */
     
      border        : 0.2em solid #000; /* 2px */
      border-radius : 0.4em; /* 4px */
     
      box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
     
      background : #F0F0F0;
      background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
      background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
    }
     
    .select .value {
      display  : inline-block;
      width    : 100%;
      overflow : hidden;
     
      white-space   : nowrap;
      text-overflow : ellipsis;
      vertical-align: top;
    }
     
    .select:after {
      content : "▼";
      position: absolute;
      z-index : 1;
      height  : 100%;
      width   : 2em; /* 20px */
      top     : 0;
      right   : 0;
     
      padding-top : .1em;
     
      -moz-box-sizing : border-box;
      box-sizing : border-box;
     
      text-align : center;
     
      border-left  : .2em solid #000;
      border-radius: 0 .1em .1em 0;
     
      background-color : #000;
      color : #FFF;
    }
     
    .select .optList {
      z-index : 2;
     
      list-style: none;
      margin : 0;
      padding: 0;
     
      background: #f0f0f0;
      border: .2em solid #000;
      border-top-width : .1em;
      border-radius: 0 0 .4em .4em;
     
      box-shadow: 0 .2em .4em rgba(0,0,0,.4);
     
      -moz-box-sizing : border-box;
      box-sizing : border-box;
     
      min-width : 100%;
      max-height: 10em; /* 100px */
      overflow-y: auto;
      overflow-x: hidden;
    }
     
    .select .option {
      padding: .2em .3em;
    }
     
    .select .highlight {
      background: #000;
      color: #FFFFFF;
    }

    JavaScript Content

    // ------- //
    // HELPERS //
    // ------- //
    
    NodeList.prototype.forEach = function (callback) {
      Array.prototype.forEach.call(this, callback);
    }
    
    // -------------------- //
    // Function definitions //
    // -------------------- //
    
    function deactivateSelect(select) {
      if (!select.classList.contains('active')) return;
    
      var optList = select.querySelector('.optList');
    
      optList.classList.add('hidden');
      select.classList.remove('active');
    }
    
    function activeSelect(select, selectList) {
      if (select.classList.contains('active')) return;
    
      selectList.forEach(deactivateSelect);
      select.classList.add('active');
    };
    
    function toggleOptList(select, show) {
      var optList = select.querySelector('.optList');
    
      optList.classList.toggle('hidden');
    }
    
    function highlightOption(select, option) {
      var optionList = select.querySelectorAll('.option');
    
      optionList.forEach(function (other) {
        other.classList.remove('highlight');
      });
    
      option.classList.add('highlight');
    };
    
    // ------------- //
    // Event binding //
    // ------------- //
    
    window.addEventListener("load", function () {
      var form = document.querySelector('form');
     
      form.classList.remove("no-widget");
      form.classList.add("widget");
    });
    
    window.addEventListener('load', function () {
      var selectList = document.querySelectorAll('.select');
    
      selectList.forEach(function (select) {
        var optionList = select.querySelectorAll('.option');
    
        optionList.forEach(function (option) {
          option.addEventListener('mouseover', function () {
            highlightOption(select, option);
          });
        });
    
        select.addEventListener('click', function (event) {
          toggleOptList(select);
        },  false);
    
        select.addEventListener('focus', function (event) {
          activeSelect(select, selectList);
        });
    
        select.addEventListener('blur', function (event) {
          deactivateSelect(select);
        });
      });
    });

    Result

    Document Tags and Contributors

    Tags:
    Contributors to this page: Sheppy, lmorchard, Jeremie
    Last updated by: Sheppy,