custom select 1

a simple starter example, a custom select element, a static example with isolated style tags

<select-one>
          <template shadowrootmode=open>
            <style>
              :host {
                --darkgray: lightgray;
              }
              
              select {
                                                  /* Reset Select */
                appearance: none;
                outline: 10px red;
                border: 0;
                box-shadow: none;
                                                  /* Personalize */
                flex: 1;
                padding: 0 1em;
                color: dimgray;
                background-color: var(--darkgray);
                background-image: none;
                cursor: pointer;
                padding:5px 10px;
              }
                                                /* Remove IE arrow */
              select::-ms-expand {
                display: none;
              }
                                                /* Custom Select wrapper */
              .select {
                position: relative;
                display: inline-flex;
                width: 150px;
                /*height: 3em;*/
                border-radius: .25em;
                overflow: hidden;
                color: dimgray;
              }
                                                /* Arrow */
              .select::after {
                content: '\25BC';
                position: absolute;
                top: 5px;
                right: 10px;
                /*padding: 1em;*/
                background-color: var(--darkgray);
                transition: .25s all ease;
                pointer-events: none;
              }
                                              /* Transition */
              .select:hover::after {
                color: #f39c12;
              }
            </style>
          
          
            <div class="select">
              <select>
                <option value="Americano">Americano</option>
                <option value="Latte">Latte</option>
                <option value="Green Tea">Green Tea</option>
              </select>      
            </div>
            
          </template>
        <select-one>
        
        <script>
        
              var node          = document.querySelector('select-one');
              var select        = node.shadowRoot.querySelector('select');
              select.onchange   = e=>alert(select.value);
              
        </script>

demo 1

custom select2

second example, a custom select element, user supplied characteristics, available multiple times on a single page


    <select-two>
      <template id=select-two-template>
        
          <style>
            :host {
              --darkgray: lightgray;
            }
            
            ::slotted(select) {
              /* Reset Select */
              appearance: none;
              outline: 10px red;
              border: 0;
              box-shadow: none;
              /* Personalize */
              flex: 1;
              padding: 0 1em;
              color: dimgray;
              background-color: var(--darkgray);
              background-image: none;
              cursor: pointer;
              padding:5px 10px;
            }
            /* Remove IE arrow */
            ::slotted(select)::-ms-expand {
              display: none;
            }
            
            /* Custom Select wrapper */
            .select {
              position: relative;
              display: inline-flex;
              width: 150px;
              /*height: 3em;*/
              border-radius: .25em;
              overflow: hidden;
              color: dimgray;
            }
            /* Arrow */
            .select::after {
              content: '\25BC';
              position: absolute;
              top: 5px;
              right: 10px;
              /*padding: 1em;*/
              background-color: var(--darkgray);
              transition: .25s all ease;
              pointer-events: none;
            }
            /* Transition */
            .select:hover::after {
              color: #f39c12;
            }
          </style>
        
        
          <div class="select">
              <slot></slot>
          </div>
        
      </template>
        
      <script>
          class SelectTwo extends HTMLElement {
            constructor() {
              super();
              
              var template          = document.getElementById("select-two-template");
              var templateContent   = template.content;
              var shadowRoot        = this.attachShadow({mode:"open"});
              shadowRoot.appendChild(templateContent.cloneNode(true));
    
            }
          }
          customElements.define('my-select2',SelectTwo);
      </script>
    </select-two>
    
    <my-select2>
          <select>
            <option value="Americano">Americano</option>
            <option value="Latte">Latte</option>
            <option value="Green Tea">Green Tea</option>
          </select>      
    </my-select2>
    
    
    <script>
    
      var node        = document.querySelector('my-select2 select');
      node.onchange   = e=>alert(node.value);
      
    </script>

demo 2

select component