ui/webui/resources/cr_elements/md_select_css.html

<link rel="import" href="../html/polymer.html">

<link rel="import" href="shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<dom-module id="md-select">
  <template>
    <style>
      .md-select {
        --md-arrow-width: 10px;
        --md-select-bg-color: var(--google-grey-refresh-100);
        --md-select-focus-shadow-color: rgba(var(--google-blue-600-rgb), .4);
        --md-select-option-bg-color: white;
        --md-select-side-padding: 8px;
        --md-select-text-color: var(--google-grey-900);

        -webkit-appearance: none;
        background: url(chrome://resources/images/arrow_down.svg)
            calc(100% - var(--md-select-side-padding))
            center no-repeat;
        background-color: var(--md-select-bg-color);
        background-size: var(--md-arrow-width);
        border: none;
        border-radius: 4px;
        color: var(--md-select-text-color);
        cursor: pointer;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        max-width: 100%;
        outline: none;
        padding-bottom: 6px;
        /* Ensures 3px space between text and arrow */
        padding-inline-end: calc(var(--md-select-side-padding) +
            var(--md-arrow-width) + 3px);
        padding-inline-start: var(--md-select-side-padding);
        padding-top: 6px;
        width: var(--md-select-width, 200px);
      }

      @media (prefers-color-scheme: dark) {
        .md-select {
          --md-select-bg-color: rgba(0, 0, 0, .3);
          --md-select-focus-shadow-color:
              rgba(var(--google-blue-refresh-300-rgb), .5);
          /* --google-grey-900 + 4% white. This is typically implemented with
           * background-{color,image} for e.g. menus, but it's not currently
           * possible to style background-image on <option>. */
          --md-select-option-bg-color: #28292c;
          --md-select-text-color: var(--cr-primary-text-color);
          background-image: url(chrome://resources/images/dark/arrow_down.svg);
        }
      }

      /* Makes sure anything within the dropdown menu has a background. */
      .md-select :-webkit-any(option, optgroup) {
        background-color: var(--md-select-option-bg-color);
      }

      .md-select[disabled] {
        opacity: var(--cr-disabled-opacity);
        pointer-events: none;
      }

      .md-select:focus {
        box-shadow: 0 0 0 2px var(--md-select-focus-shadow-color);
      }

      /* Should not have an outline if opened by mouse click. */
      .md-select:active {
        box-shadow: none;
      }

      :host-context([dir=rtl]) .md-select {
        background-position-x: var(--md-select-side-padding);
      }
    </style>
  </template>
</dom-module>