College of Business Style Guide

Forms: Dropdown List 

<div class="form-item">
    <label for="select" class="form-item__label form-item__label--textfield">Music Genres</label>
    <div class="form-item__dropdown">
        <select class="form-item__select">
            <option>Rock</option>
            <option>Rap</option>
            <option>Country</option>
            <option>Hip-Hop</option>
            <option>Alternative</option>
            <option>Jazz</option>
            <option>Classical</option>
        </select>
    </div>
</div>
 
<div class="form-item">
    <label for="select" class="form-item__label form-item__label--textfield">Music Genres</label>
    <div class="form-item__dropdown">
        <select class="form-item__select">
            {% for music_genere in music_generes %}
                <option>{{ music_genere.type }}</option>
            {% endfor %}
        </select>
    </div>
</div>
 
{
  "legend": "Which are Creed Songs?",
  "list_items": {
    "1": {
      "key": 1,
      "item": "Radioactive"
    },
    "2": {
      "key": 2,
      "checked": "checked",
      "item": "With Arms Wide Open"
    },
    "3": {
      "key": 3,
      "item": "Ice, Ice, Baby"
    },
    "4": {
      "key": 4,
      "checked": "checked",
      "item": "Weathered"
    }
  },
  "music_generes": {
    "1": {
      "type": "Rock"
    },
    "2": {
      "type": "Rap"
    },
    "3": {
      "type": "Country"
    },
    "4": {
      "type": "Hip-Hop"
    },
    "5": {
      "type": "Alternative"
    },
    "6": {
      "type": "Jazz"
    },
    "7": {
      "type": "Classical"
    }
  }
}
  • Content: 
    .checkbox-list,
.radiobutton-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-item {
  margin: $space 0;

  &:first-of-type {
    margin: 0 0 $space 0;
  }

  &:last-of-type {
    margin: $space 0 0 0;
  }
}

.form-item__select,
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=number],
textarea {
  font-size: 1rem;
}

.search-name {
  position: relative;

  .search-name-box {
    min-width: 300px;
    background: transparent url(../images/search-icon.jpg) no-repeat 98% center;
    background-size: 25px auto;
    height: 30px;
  }

  #search-name-submit {
    -webkit-appearance: none;
    box-sizing: inherit;
    padding: 0;
    border-width: 0;
    border-style: none;
    border-color: inherit;
    border-image: none;
    color: transparent;
    position: absolute;
    left: 250px;
    top: 1px;
    width: 55px;
    height: 30px;
    background-color: transparent;
  }
}

form {
  .hidden {
    visibility: hidden;
  }
}
  • URL: /components/raw/forms/forms.scss
  • Filesystem Path: components/01-elements/03-forms/forms.scss
  • Size: 984 Bytes
  • Handle: @forms--dropdown-list
  • Preview:
  • Filesystem Path: components/01-elements/03-forms/forms--dropdown-list.twig

No notes defined.