<div class="form-group"> <label for="standard-select">Standard Select</label> <div class="form-field select"> <select id="standard-select" name="standard-select"> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3">Option 3</option> <option value="Option 4">Option 4</option> <option value="Option 5">Option 5</option> <option value="Option length"> Option that has too long of a value to fit </option> </select> </div> </div> <div class="form-group"> <label for="multi-select">Multiple Select</label> <div class="form-field select select--multiple"> <select id="multi-select" name="multi-select" multiple> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3">Option 3</option> <option value="Option 4">Option 4</option> <option value="Option 5">Option 5</option> <option value="Option length"> Option that has too long of a value to fit </option> </select> </div> </div>
.form-field { border-color: var(--color-default, color("default")); &:focus { @include field-focus; } &:disabled { @include field-disabled; } } .form-field.select { display: grid; align-items: center; grid-template-areas: "select"; background-image: linear-gradient( to top, scale-color(color("white"), $lightness: -10%), color("white") 33% ); select, &::after { grid-area: select; } &:not(.select--multiple)::after { content: ""; width: 0.8em; height: 0.5em; background-color: var(--color-default, color("default")); justify-self: end; clip-path: polygon(100% 0%, 0 0%, 50% 100%); } select { z-index: 1; &[multiple] { padding-right: 0; } }
}
`select` and `arrow down` are in the same grid template:
grid-template-areas: "select";
If without:
justify-self: end;
for arrow-down, it looks like:
With 'justify-self: end' it looks like: