<select name="select_name" id="select_id">
  
          <option>Option 1</option>
    
  
          <option>Option 2</option>
    
  
          <optgroup label="Option group">
                  <option>Option 3</option>
                  <option>Option 4</option>
              </optgroup>

    
  </select>
<select name="{{ select_name }}"
        id="{{ select_id }}"
        {% if modifier %}
          class="{{ modifier }}"
        {% endif  %}
>
  {% for option in options %}

    {% if option.optgroup %}
      <optgroup label="{{ option.label }}">
        {% for opt in option.optgroupoptions %}
          <option>{{ opt.label }}</option>
        {% endfor %}
      </optgroup>

    {% else %}
      <option>{{ option.label }}</option>
    {% endif %}

  {% endfor %}
</select>
{
  "select_name": "select_name",
  "select_id": "select_id",
  "label": "Input Select",
  "options": [
    {
      "label": "Option 1"
    },
    {
      "label": "Option 2"
    },
    {
      "optgroup": true,
      "label": "Option group",
      "optgroupoptions": [
        {
          "label": "Option 3"
        },
        {
          "label": "Option 4"
        }
      ]
    }
  ]
}
  • Content:
    select {
      @extend %field-colors;
    
      @include themify {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPg0KPGc+PHBhdGggZD0iTTUwMCwxMEwyMjcuOCwzOTEuMWg1NDQuNEw1MDAsMTB6IE01MDAsOTkwbDI3Mi4yLTM4MS4xSDIyNy44TDUwMCw5OTB6Ii8+PC9nPg0KPC9zdmc+');
        background-repeat: no-repeat;
        background-position: center right 5px;
        background-size: 1rem 1rem;
      }
    
      &::-ms-expand { // sass-lint:disable-line no-vendor-prefixes
        display: none;
      }
    }
    
  • URL: /components/raw/input-select/_input-select.scss
  • Filesystem Path: components/21-atoms/inputs/input-select/_input-select.scss
  • Size: 1.1 KB

There are no notes for this item.