Component Library

Select 

<div class="select__wrapper">
    <select class="select" name="select" id="selectId">
        <option selected="true" disabled="disabled">Choose an option</option>

            <option value="Value 1">Option 1</option>
            <option value="Value 2">Option 2</option>
            <option value="Value 3">Option 3</option>
            <option value="Value 4">Option 4</option>
        
    </select>
    <svg class="svg-icon  select__icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-dropdown"></use>
    </svg></div>
 
<div class="select__wrapper">
    <select class="select" name="{{ name }}" id="{{ id }}">
        <option selected="true" disabled="disabled">{{ label }}</option>

        {{#each options}}
            <option value="{{ value }}">{{ name }}</option>
         {{/each}}
        
    </select>
    {{> @svg-icon class="select__icon" svgIconName="icon-dropdown"}}
</div>
 
{
  "name": "select",
  "id": "selectId",
  "label": "Choose an option",
  "options": [
    {
      "name": "Option 1",
      "value": "Value 1"
    },
    {
      "name": "Option 2",
      "value": "Value 2"
    },
    {
      "name": "Option 3",
      "value": "Value 3"
    },
    {
      "name": "Option 4",
      "value": "Value 4"
    }
  ]
}
  • Content: 
    :root {
    --color-checkbox: var(--color-primary);
}

.select {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 40px 0 15px;
    font-size: 16px;
    line-height: 1;
    font-family: var(--input-font-family);
    color: var(--input-text-color);
    background-color: var(--input-background-color);
    background-image: none; /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214*/
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius);
    vertical-align: bottom;
    -webkit-appearance: none;
    appearance: none;

    &::-ms-expand {
        display: none;
    }

    &:focus {
        outline: 0;
    }

    &__wrapper {
        position: relative;
    }

    &__icon {
        position: absolute;
        right: 15px;
        top: 14px;
        width: 12px;
        height: 12px;
        z-index: 1;
        pointer-events: none;
        fill: var(--color-text);
    }
}
  • URL: /components/raw/select/select.css
  • Filesystem Path: src/01-atoms/forms/select/select.css
  • Size: 988 Bytes

There are no notes for this item.