For example, we have single selector and multi selector:
<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>
If you just want to target 'mutiple' select, you can do in scss:
select { &[multiple] { padding-right: 0; } }