select-appearance-optgroup-rendering-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<link rel=stylesheet href="resources/customizable-select-styles.css">

<style>

.border {

  border: 2px solid green;

/* TODO(crbug.com/379886419): Remove these proprietary styles */

.customizable-select-legend {

  padding: 0px 2px 1px;

  min-height: 1.2em;

</style>

<div class=customizable-select-button id=button>

  <span class=customizable-select-selectedcontent>one</span>

</div>

<div id=popover popover=auto anchor=button class=customizable-select-popover>

  <div class="customizable-select-option selected">one</div>

  <div class=customizable-select-optgroup>

    <div class=customizable-select-legend>labelattribute</div>

    <div class=customizable-select-option>two</div>

    <div class=border>

      <div class=customizable-select-option>three</div>

    </div>

  </div>

  <div class=customizable-select-option>four</div>

</div>

<script>

document.getElementById('popover').showPopover();

</script>