<label for="country-select">Country</label>
<div class="wrapper">
  <select class="wrapper__select" name="country-select" id="country-select">
    <option value="US">United States</option>
    <option value="JP">Japan</option>
  </select>
  <div class="wrapper__flags" role="presentation">
    <svg class="wrapper__flags__flag is-visible" data-country-code="US" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#FFF" viewBox="0 0 1235 650">
      <path d="M0 0h1235v650H0"/>
      <path stroke="#B22234" stroke-width="2470" stroke-dasharray="50" d="M0 0v651"/>
      <path fill="#3C3B6E" d="M0 0h494v350H0"/>
      <g id="e">
        <g id="d">
          <g id="f">
            <g id="c">
              <g id="b">
                <path d="M30.1 50.6l12-36 12 36-30.8-22h37.8" id="a"/>
                <use xlink:href="#a" x="82"/>
              </g>
              <use xlink:href="#b" x="164"/>
              <use xlink:href="#a" x="328"/>
            </g>
            <use xlink:href="#a" x="410"/>
          </g>
          <use xlink:href="#c" x="41" y="35"/>
        </g>
        <use xlink:href="#d" y="70"/>
      </g>
      <use xlink:href="#e" y="140"/>
      <use xlink:href="#f" y="280"/>
    </svg>
    <svg class="wrapper__flags__flag" data-country-code="JP" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
      <path fill="#fff" d="M0 0h900v600H0z"/>
      <circle fill="#bc002d" cx="450" cy="300" r="180"/>
    </svg>
  </div>
</div>
.wrapper {
	width: 35px;
  position: relative;
}

.wrapper__select {
  width: 100%;
  opacity: 0;
}

.wrapper__flags {
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.wrapper__flags__flag {
  height: 100%;
  border: 1px solid #ddd;
  box-sizing: border-box;
  display: none;
}
.wrapper__flags__flag.is-visible {
  display: block;
}
let countrySelect = document.getElementById('country-select');
let updateSelected = function(e) {
  document.querySelector('.is-visible').classList.remove('is-visible');
  document.querySelector('[data-country-code="' + e.target.value + '"]').classList.add('is-visible');
};

countrySelect.addEventListener('change', updateSelected);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.