Springboard

Select 

<label for="beverages">Choose Your Beverage</label>
<select name="" id="beverages">
  <option value=""></option>
  <option value="1">Coffee</option>
  <option value="2">Tea</option>
  <option value="3">Water</option>
</select>
 
{{render '@label' label }}
<select name="{{ name }}" id="{{ id }}">
  {{#each option}}
  <option value="{{ value }}">{{ text }}</option>
  {{/each}}
</select>
 
{
  "label": {
    "text": "Choose Your Beverage",
    "for": "beverages"
  },
  "id": "beverages",
  "option": [
    {
      "text": null,
      "value": null
    },
    {
      "text": "Coffee",
      "value": 1
    },
    {
      "text": "Tea",
      "value": 2
    },
    {
      "text": "Water",
      "value": 3
    }
  ]
}
  • Content: 
    select {
  @extend %input;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 500"><path fill="rgba(0,0,0,.5)" d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>'), linear-gradient(#fff, #eee);
  background-position-x: 0%, 0%;
  background-position-y: 0%, 0%;
  background-repeat: repeat, repeat;
  background-size: auto, auto;
  background-position: right .6em center, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-size: 1.375em 1.2em, 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

select:focus {
  @extend %inputfocus;
}
  • URL: /components/raw/select/_sass.scss
  • Filesystem Path: components/01-elements/03-form-controls/select/_sass.scss
  • Size: 741 Bytes

There are no notes for this item.