FAQs

Questions

Follow these steps below to resolve this issue:

Create your own custom dropdown without using the select and the option elements, then add your custom javascript to toggle the dropdown. Use the code provided below as reference.

HTML snippet

<!doctype html>
<html lang="en">
    <head>
        <title>Title</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Dropdown css -->
        <link rel="stylesheet" href="./style.css">
    </head>

    <body>
        <div class="drop-down">
                <div class="selected">
                    <a href="#"><span>Please select <i class="arrow"> &#8964; </i></span></a>
                </div>
                <div class="options">
                    <ul>
                        <li><a href="#">User1<span class="value">1</span></a></li>
                        <li><a href="#">User2<span class="value">2</span></a></li>
                        <li><a href="#">User3<span class="value">3</span></a></li>
                    </ul>
                </div>
        </div>
        <!-- Dropdowm JS -->
        <script src="./dropdown.js"></script>
    </body>
</html>

CSS snippet

  .drop-down .selected a {
      background: #fff no-repeat scroll right center;
      display: block;
      padding-right: 20px;
      border: 1px solid #d7d7d7;
      width: 150px;
      border-radius: 2px;
      text-decoration: none;
      color: #3179ac;
  }

  .drop-down .selected a span {
      cursor: pointer;
      display: inline;
      padding: 5px;
  }

  .drop-down .options {
      position: relative;
      margin-top: -17px;
  }

  .arrow {
      position: relative;
      left: 30px;
  }

  .drop-down .options ul {
      background: #fff none repeat scroll 0 0;
      display: none;
      list-style: none;
      padding: 0px 0px;
      position: absolute;
      width: auto;
      min-width: 170px;
      border: 1px solid #d7d7d7;
  }

  .drop-down .selected span.value,
  .drop-down .options span.value {
      display: none;
  }

  .drop-down .options ul li a {
      padding: 5px;
      display: block;
      text-decoration: none;
      color: #3179ac;
  }

  .drop-down .options ul li a:hover {
      background: #3179ac;
      color: #fff;
      transition: 0.2s ease;
  }

  .drop-down .selected span.value,
  .drop-down .options span.value {
      display: none;
  }

  .drop-down .options ul li a {
      padding: 5px;
      display: block;
      text-decoration: none;
  }

  .drop-down .options ul li a:hover {
      background: #3179ac;
      color: #fff;
      transition: 0.2s ease;
  }

JS snippet

//TOGGLING NESTED ul
$(".drop-down .selected span").click(function () {
    $(".drop-down .options ul").toggle();
});

//SELECT OPTIONS AND HIDE OPTION AFTER SELECTION
$(".drop-down .options ul li a").click(function () {
    let options = $(this).html();
    $(".drop-down .selected a span").html(options);
    $(".drop-down .options ul").hide();
});

//HIDE OPTIONS IF CLICKED ANYWHERE ELSE ON PAGE
$(document).bind('click', function (e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("drop-down"))
        $(".drop-down .options ul").hide();
});

Use JQuery UI css and javascript as it duplicates and extends the functionality of a native HTML elements to overcome the limitations of the native control. Mostly recommend

JQuery UI css and javascript

- You need to link JQuery css and javascript in your project
- Create your own custom javascript so that you can target the element that you want to apply JQuery UI on.

JQuery links

JQuery css

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

JQuery javascript

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

HTML snippet

<select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

JQuery custom javascript

Make sure this script is linked after the JQuery scripts above

$(function () {
    $("#cars").selectmenu(); // If you have multiple dropdowns, you can use the same class name on your dropdowns
});