<div class="wrapper">
  <header class="header"><h1 class="titlehead">Accessible CSS Select Box</h1></header>
  <p class="selectstyle selectstyle--style1">
    <label for="favcity1" class="selectstyle__label">Choose your #1 favorite city?</label>
    <span class="selectstyle__box">
      <select id="favcity1" name="favcity1" class="selectstyle__box__select">
        <option value="0">No favorite</option>
        <optgroup label="Asia">
          <option value="3">Delhi</option>
          <option value="4">Hong Kong</option>
          <option value="8">Mumbai</option>
          <option value="11">Tokyo</option>
        </optgroup>
        <optgroup label="Europe">
          <option value="1">Amsterdam</option>
          <option value="5">London</option>
          <option value="7">Moscow</option>
        </optgroup>
        <optgroup label="North America">
          <option value="6">Los Angeles</option>
          <option value="9">New York</option>
        </optgroup>
        <optgroup label="South America">
          <option value="2">Buenos Aires</option>
          <option value="10">Sao Paulo</option>
        </optgroup>
      </select>
    </span>
  </p>

  <p class="selectstyle selectstyle--style2">
    <label for="favcity2" class="selectstyle__label">Choose your #2 favorite city?</label>
    <span class="selectstyle__box">
      <select id="favcity2" name="favcity2" class="selectstyle__box__select">
        <option value="0">No favorite</option>
        <optgroup label="Asia">
          <option value="3">Delhi</option>
          <option value="4">Hong Kong</option>
          <option value="8">Mumbai</option>
          <option value="11">Tokyo</option>
        </optgroup>
        <optgroup label="Europe">
          <option value="1">Amsterdam</option>
          <option value="5">London</option>
          <option value="7">Moscow</option>
        </optgroup>
        <optgroup label="North America">
          <option value="6">Los Angeles</option>
          <option value="9">New York</option>
        </optgroup>
        <optgroup label="South America">
          <option value="2">Buenos Aires</option>
          <option value="10">Sao Paulo</option>
        </optgroup>
      </select>
    </span>
  </p>

  <p class="selectstyle selectstyle--style3">
    <label for="favcity3" class="selectstyle__label">Choose your #3 favorite city?</label>
    <span class="selectstyle__box">
      <select id="favcity3" name="favcity3" class="selectstyle__box__select">
        <option value="0">No favorite</option>
        <optgroup label="Asia">
          <option value="3">Delhi</option>
          <option value="4">Hong Kong</option>
          <option value="8">Mumbai</option>
          <option value="11">Tokyo</option>
        </optgroup>
        <optgroup label="Europe">
          <option value="1">Amsterdam</option>
          <option value="5">London</option>
          <option value="7">Moscow</option>
        </optgroup>
        <optgroup label="North America">
          <option value="6">Los Angeles</option>
          <option value="9">New York</option>
        </optgroup>
        <optgroup label="South America">
          <option value="2">Buenos Aires</option>
          <option value="10">Sao Paulo</option>
        </optgroup>
      </select>
    </span>
  </p>
  <p id="favs" class="comment"></p>
  <p class="comment">For accessibility, a simple select box is often best. A little CSS lets us retain all the WCAG goodness of the semantic element along with freedom to style.</p>

  <footer class="footer"><a href="https://shearspiremedia.com" target="_blank">Created by ShearSpire Media</a></footer>
</div>

/* Base styles imported from
https://makepages.com/css/shared.css
*/
.wrapper {text-align:center;}
.selectstyle {
  --selectsize:3rem;
  --uibordercolor:#bbb;
  --uibackground:#f8f8f8;
  --uiborderradiusfactor:0;
  --uihovercolor:#363636;
  --uireversecolor:#fff;
  --unicodepointer:"\25bc";
}
.selectstyle--style1 {
  --uibordercolor:#ace;
  --uibackground:#f8f8ff;
  --uiborderradiusfactor:0.167;
  --uihovercolor:#125FA6;
  --uireversecolor:#fff;
}
.selectstyle--style2 {
  font-family:Georgia, serif;
  --unicodepointer:"\2630";
}
.selectstyle--style3 {
  --selectsize:2rem;
  --uibordercolor:#c00;
  --uibackground:#f8f8f8;
  --uiborderradiusfactor:0.3;
  --uihovercolor:#600;
  --uireversecolor:#ffc;
  --unicodepointer:"\25bd";
}
.selectstyle__box {
  margin:0 auto;
  width:auto;
  height:auto;
  text-align:center;
  overflow:visible;
  position: relative;
  display:inline-block;
  font-size:calc(var(--selectsize) * 0.5);
}

.selectstyle__label {
  font-size:calc(var(--selectsize) * 0.5);
  position: relative;
  display: inline-block;
  margin:0 calc(var(--selectsize) * 0.5) 0 0;
  white-space:nowrap;
}
.selectstyle__box__select {
  position:relative;
  display: inline-block;
  border: 0.125rem solid var(--uibordercolor);
  padding: 0 calc(var(--selectsize) * 0.09) 0 calc(var(--selectsize) * 0.15);
  margin: 0;
  font: inherit;
  height:var(--selectsize);
  line-height: calc(var(--selectsize) * 0.92);
  background: var(--uibackground);
  -moz-appearance: none;
  -webkit-appearance: none;
  /* remove the strong OSX influence from Webkit */
  appearance: none;
  border-radius: calc(var(--selectsize) * var(--uiborderradiusfactor));
}
.selectstyle__box__select optgroup, .selectstyle__box__select optgroup option {
  /* This helps the appearance of select dropdowns in Firefox to be more like other browsers.
  Chrome and Safari ignore these rules */
  color:black;
  background:#ccc;
  font-size:inherit;
}

/* for Webkit's CSS-only solution */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .selectstyle__box__select {
    padding-right: calc(var(--selectsize) * 0.835);
  }
}
/* Select arrow styling using unicode symbol */
.selectstyle__box::after {
  width:var(--selectsize);
  height:var(--selectsize);
  content: var(--unicodepointer);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  font-size: 60%;
  line-height: var(--selectsize);
  padding: 0 0.4375rem;
  background: var(--uibackground);
  color: black;
  pointer-events: none;
  border-radius: 0 calc(var(--selectsize) * var(--uiborderradiusfactor)) calc(var(--selectsize) * var(--uiborderradiusfactor)) 0;
  border: 0.125rem solid var(--uibordercolor);
}
.selectstyle__box:hover::after, .selectstyle__box__select:hover {
  background:var(--uihovercolor);
  color:var(--uireversecolor);
}
.no-pointer-events .selectstyle__box__select:after {
  content: none;
}

/* no js needed unless you wish to respond to changes in the select boxes as below.
*/
let citymenus = document.querySelectorAll(".selectstyle__box__select");
for (let i=0;i<citymenus.length;i++){
  citymenus[i].addEventListener("change",showCities);
}
function showCities(){
  let c1 = citymenus[0].options[citymenus[0].selectedIndex].text;
  let c2 = citymenus[1].options[citymenus[1].selectedIndex].text;
  let c3 = citymenus[2].options[citymenus[2].selectedIndex].text;
  document.getElementById("favs").innerHTML = `You chose ${c1}, ${c2}, and ${c3}.`;
}