Single-select med endast CSS och HTML

<div class="c-select--medium">
  <label for="field-1">Välj din favoritfrukt</label>
  <div class="c-select__wrapper">
    <select id="field-1" onchange="this.dataset.empty = this.value == ''">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>
        Detta är en frukt med väldigt långt namn för att testa hur single-select funkar med långa texter
      </option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>

<div class="c-select--small">
  <label for="field-5_small">Välj din favoritfrukt</label>
  <div class="c-select__wrapper">
    <select id="field-5_small" onchange="this.dataset.empty = this.value == ''">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>

<div class="c-select--medium">
  <label for="field-1_obligatorisk">Välj din favoritfrukt
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
  </label>
  <div class="c-select__wrapper">
    <select id="field-1_obligatorisk" required="" onchange="this.dataset.empty = this.value == ''">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>
        Detta är en frukt med väldigt långt namn för att testa hur single-select funkar med långa texter
      </option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>

<div class="c-select--small">
  <label for="field-2_obligatorisk">Välj din favoritfrukt
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
  </label>
  <div class="c-select__wrapper">
    <select id="field-2_obligatorisk" required="" onchange="this.dataset.empty = this.value == ''">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>
        Detta är en frukt med väldigt långt namn för att testa hur single-select funkar med långa texter
      </option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>

<div class="c-select--medium">
  <label for="field-6">Välj din favoritfrukt
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
    <span class="label__description">Välj den frukt du oftast köper.</span>
  </label>
  <div class="c-select__wrapper">
    <select id="field-6" required="" onchange="this.dataset.empty = this.value == ''">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>

<div class="c-select--small">
  <label for="field-6_small">Välj din favoritfrukt
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
    <span class="label__description">Välj den frukt du oftast köper.</span>
  </label>
  <div class="c-select__wrapper">
    <select id="field-6_small" required="" onchange="this.dataset.empty = this.value == ''">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>

<div class="c-select--medium c-select--error">
  <label for="field-3">Välj din favoritfrukt
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
    <span class="error"><span class="sjv-i-fel"></span>Välj en frukt.</span>
  </label>
  <div class="c-select__wrapper">
    <select id="field-3" required="" onchange="this.dataset.empty = this.value == ''">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>

<div class="c-select--small c-select--error">
  <label for="field-error">Välj din favoritfrukt
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
    <span class="error"><span class="sjv-i-fel"></span>Välj en frukt.</span>
  </label>
  <div class="c-select__wrapper">
    <select id="field-error" required="" onchange="this.dataset.empty = this.value == ''">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>

<div class="c-select--medium c-select--disabled">
  <label for="field-2_inaktiverad">Välj din favoritfrukt</label>
  <div class="c-select__wrapper">
    <select disabled="" id="field-2_inaktiverad">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>

<div class="c-select--small c-select--disabled">
  <label for="field-2_inaktiverad_small">Välj din favoritfrukt</label>
  <div class="c-select__wrapper">
    <select disabled="" id="field-2_inaktiverad_small">
      <option value="">-- Inget valt --</option>
      <option>Ananas</option>
      <option>Apelsin</option>
      <option>Banan</option>
      <option>Blodapelsin</option>
      <option>Clementin</option>
      <option>Dadel</option>
      <option>Kiwifrukt</option>
      <option>Päron</option>
      <option>Äpple</option>
    </select>
    <span class="sjv-i-caret-ner ikon"> </span>
  </div>
</div>