demos/07-disabled-options.html

<!doctype HTML>
<html>
    <head>
        <title>Disabled Options | EasyDropDown Demo</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

        <link href="./style.css" rel="stylesheet"/>
        <link id="theme-sheet" href="./themes/flax.css" rel="stylesheet"/>
        <link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAAABCiZtUyORUyORCiZtUyORCiZtUyORCiZtUyORUyORCiZtUyORCiZtUyOREkKNUyORUyORUyORCiZtUyORUyORCiZtUyORCiZtUyORCiZtDjaBFlalHma1KpbtLqcBOtM1QuNJSwNtTxN9UyOQlYZhqAAAAGnRSTlMAEBAgMDBAQFBQYHBwgICPj5+vv7/P39/v793jxf8AAACqSURBVHja1ZJdF4IgDIYnZaaVpWbKrCzl///GIokYH3btc/fuPBwGGywCQeH5HyEVyaxwAsHZjFDLfA4LfPXJeVBIVU4CQvHNDfMKNdO59Ak8NvLeI2Qkx45Q0NwwSxiO1oHSEq64ta8kwh2xjeymDeGBbyrn2bowdCg5+D4OpgYmNlQQmRJ6VLSRMzxZeKKmcscPYuzwx85ZIBA3NFnbKwg9Ei4jFTgsgRepVztePP0rPgAAAABJRU5ErkJggg==">

        <script src="./scripts/themeSwitcher.js"></script>
    </head>
    <body>
        <main class="main">
            <h2 class="sub-heading">EasyDropDown Demo</h2>

            <h1 class="heading">07. Disabled Options</h1>

            <div class="demo-container">
                <select>
                        <option value="" data-placeholder>Expiry Month</option>
                        <option disabled>January</option>
                        <option disabled>February</option>
                        <option disabled>March</option>
                        <option disabled>April</option>
                        <option>May</option>
                        <option>June</option>
                        <option>July</option>
                        <option>August</option>
                        <option>September</option>
                        <option>October</option>
                        <option>November</option>
                        <option>December</option>
                </select>
            </div>

            <div class="theme-switcher">
                <div class="theme-switcher-label">Theme:</div>

                <div class="theme-switcher-options">
                    <button type="button" data-theme="./themes/flax.css" class="active">Flax</button> |
                    <button type="button" data-theme="./themes/beanstalk.css">Beanstalk</button> |
                    <button type="button" data-theme="./themes/ivy.css">Ivy</button>
                </div>
            </div>
        </main>

        <footer class="footer">
            <a target="_blank" href="https://github.com/patrickkunka/easydropdown">EasyDropDown v4</a>
            <a target="_blank" href="https://www.kunkalabs.com">&copy; KunkaLabs Ltd</a>
        </footer>

        <script src="./easydropdown.js"></script>
        <script>
            easydropdown.all();
        </script>
    </body>
</html>