Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/forms/select-popup/popup-menu-appearance-styled.html 

<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<script src="../resources/picker-common.js"></script>

<style>
  select {
      padding-left: 20px;
      background-color: #DDDDFF;
  }

  option.styled {
      font-style: italic;
      font-variant: small-caps;
      font-weight: bold;
      font-family: cursive;
      font-size: 24px;
      background-color: green;
      color: red;
  }
  </style>

  <select>
    <option>foo</option>
    <optgroup label="group" id="group">
        <option selected>bar</option>
    </optgroup>
    <option hidden>qux</option>
    <option class="styled">baz</option>
  </select>

<script>
  window.onload = () => {
    var menu = document.querySelector('select');
    menu.appendChild(new Option('before separator'));
    menu.appendChild(document.createElement('hr'));
    menu.appendChild(new Option('after separator'));
    var group = document.getElementById('group');
    group.appendChild(document.createElement('hr'));
    var nestedGroup = document.createElement('optgroup');
    nestedGroup.label = 'Nested group';
    nestedGroup.innerHTML = '<option>Should not be shown</option>';
    group.appendChild(nestedGroup);
    openPickerAppearanceOnly(menu);
  };
</script>