carbon-components/html/list-box/list-box--light.html

Carbon Components is a component library for IBM Cloud

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div
  class="bx--form-item bx--list-box bx--list-box--light">
  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false"
    aria-haspopup="true">
    <span class="bx--list-box__label">Label</span>
    <div class="bx--list-box__menu-icon">
      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10"
        aria-label="Open menu">
        <title>Open menu</title>
        <path d="M10 0L5 5 0 0z"></path>
      </svg>
    </div>
  </div>
</div>
<div
  class="bx--form-item bx--list-box bx--list-box--light">
  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true"
    aria-haspopup="true">
    <span class="bx--list-box__label">Label</span>
    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10"
        aria-label="Close menu">
        <title>Close menu</title>
        <path d="M10 0L5 5 0 0z"></path>
      </svg>
    </div>
  </div>
  <div class="bx--list-box__menu">
    <div
      class="bx--list-box__menu-item bx--list-box__menu-item--highlighted"
      id="downshift-1-item-0">Option 1</div>
    <div
      class="bx--list-box__menu-item"
      id="downshift-1-item-1">Option 2</div>
    <div
      class="bx--list-box__menu-item"
      id="downshift-1-item-2">Option 3</div>
    <div
      class="bx--list-box__menu-item"
      id="downshift-1-item-3">Option 4</div>
    <div
      class="bx--list-box__menu-item"
      id="downshift-1-item-4">An example option that is really long to show what should be done to handle long text</div>
  </div>
</div>