<div class="youth-team-selection">
<select id="youth-select" class="youth-select">
<option value="" disabled selected>Select your town</option> <!-- Placeholder option -->
<option value="Paris">Paris</option>
<option value="London">London</option>
<option value="Berlin">Berlin</option>
<option value="Madrid">Madrid</option>
</select>
<img src="/assets/example-content/downarrow.svg" class="select-arrow" />
</div>
No notes defined.
{
"youth-team": [
{
"value": "Paris"
},
{
"value": "London"
},
{
"value": "Berlin"
},
{
"value": "Madrid"
}
]
}
/* stylelint-disable */
.youth-team-selection {
position: relative;
width: 100%;
}
.youth-select {
width: 100%;
height: 48px;
padding: 12px;
border-radius: 2px;
border: 2px solid #AEBDE6;
font-size: 20px;
color: #4F6074;
font-family: FS Dillon;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: white;
box-sizing: border-box;
padding-right: 30px;
}
.select-arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease-in-out;
pointer-events: none;
}
.youth-select::-ms-expand {
display: none;
}
.youth-select:focus {
border-color: #AEBDE6;
outline: none;
}
.youth-select option[disabled] {
color: #aaa;
background-color: #f5f5f5;
}
.youth-select option {
font-size: 20px;
padding: 10px;
background-color: white;
color: #4F6074;
border-radius: 2px;
}
<div class="youth-team-selection">
<select id="youth-select" class="youth-select">
<option value="" disabled selected>Select your town</option> <!-- Placeholder option -->
{{#each youth-team}}
<option value="{{value}}" {{#if default}}selected{{/if}}>{{value}}</option>
{{/each}}
</select>
<img src="/assets/example-content/downarrow.svg" class="select-arrow"/>
</div>