[CSS 3] Using CSS attribute selector

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;
        }
    }