Dropdown select

HTML

    
<div class="form__field dropdown-select">
  <label>Please choose an option:
    <select id="select-id" name="select-id"  >
      <option disabled>Select…</option>
      
				
				
  	    <option value="guardian_(including_enduring_guardian,_public_guardian_(and_his/her_delegate)_or_interstate_guardian_[aks])">Guardian (including Enduring Guardian, Public Guardian (and his/her delegate) or Interstate Guardian [AKS])</option>
				
      
				
				
  	    <option value="agent">Agent</option>
				
      
				
				
  	    <option value="a_person_empowered_under_law_to_act_as_agent_or_in_the_best_interests_of_the_volunteer">A person empowered under law to act as agent or in the best interests of the Volunteer</option>
				
      
				
				
  	    <option value="substitute_decision_maker">Substitute decision maker</option>
				
      
				
				
  	    <option value="others_equivalent_to_the_above">Others equivalent to the above</option>
				
      
				
				
  	    <option value="none_of_the_above">None of the above</option>
				
      
    </select>
  </label>
</div>

SCSS

    .dropdown-select {
	position: relative;
	margin-bottom: 28px;

	label {
		@include small-font;
		padding-right: 16px;
	}

	select {
		@include hide-visually;
	}

	.dropdown {
		display: block;
		margin: 8px 0 0;
		box-sizing: border-box;
		border: 2px solid $border-color;
		box-shadow: 0 4px 0 0 $border-shadow-color;

		&:hover,
		&:focus {
			border-color: $border-hover-color;
			box-shadow: 0 4px 0 0 $border-shadow-hover-color;
		}

		&.selected {
			border-color: $coral;

			&:hover,
			&:focus {
				border-color: $coral-D20;
			}
		}

		&.error {
			border: 3px solid $ruby;
		}

		.dropdown__options {
			display: none;
		}

		&.open {
			border-color: $coral;

			.dropdown__options {
				display: block;
			}

			.dropdown__selected {
				border-bottom: 1px solid $coral
			}
		}

		.dropdown__selected,
		.dropdown__option {
			@include small-font;
			width: 100%;
			font-weight: 400;
			color: $grey-L20;
			background-color: $white;
			box-sizing: border-box;
			padding: 8px;
		}

		.dropdown__selected {
			position: relative;

			&:after {
				position: absolute;
				top: 18px;
				right: 18px;
				color: black;
				width: 12px;
				height: 6px;
				content: '\00a0';
				background: url('/images/arrow-down-grey.svg') center center no-repeat;
			}

			&.selected {
				color: $white;
				background-color: $coral;
				border-color: $coral;

				&:after {
					background-image: url('/images/arrow-down-white.svg');
				}

				&:hover,
				&:focus {
					background-color: $coral-D20;
					border-color: $coral-D20;
				}
			}
		}

		.dropdown__option {
			color: $coral;
			border-bottom: 1px solid $coral;

			&:last-child {
				border: 0;
			}

			&:hover {
				color: $coral-D20;
				background-color: $coral-L32;
			}
		}
	}
}

Connect Dementia Research

Pattern Library

Dropdown select

HTML

SCSS