HTML окно множественного выбора без необходимости нажатия Ctrl

Question

(Прежде чем списывать это как дубликат различных других вопросов такого рода, или как на них уже был дан ответ, пожалуйста, внимательно прочитайте.)

Я хотел бы сделать мой HTML5 множественный выбор параметры, поэтому они никогда не требуют удержания Ctrl, чтобы выбрать / отменить их выбор, не затрагивая другие параметры. (Это для Perl веб-приложения, над которым я работал годами, и недавно меня попросили сделать несколько блоков выбора менее подверженными несчастным случаям, то есть пользователи (некоторые из которых довольно старые) теряют все остальные выбранные варианты, когда они нажимают один, возможно, не замечая.)

Потратив часы на тестирование различных решений, которые я нашел в Интернете для этого, я не нашел ни одного, который бы делал то, что я хотел, например:

1. Я бы предпочел не использовать jQuery, так как он мне пока не нужен в этом приложении, которое я хотел бы сохранить как можно более легким (и W3Schools говорит " после *" 1038 * Версия 5 (2009), большинство утилит jQuery могут быть решены с помощью нескольких строк стандартного JavaScript ").
2. Работа с простыми HTML элементами управления множественным выбором, и не требуется (или минимальное) изменение разметки HTML.
3. Любые отключенные <option> s (которые могут быть предварительно выбраны при загрузке страницы) не должны выбираться / не выбираться нажатием на них (или с помощью щелкнув по любой другой опции). * 1 015 *
4. Нажатие на опцию не должно приводить к автоматической прокрутке списка опций, как это происходит с некоторыми решениями.
5. Выбранные опции должны отображаться традиционным синим (или аналогичным, а не серым) цветом Chrome по крайней мере.
6. Выбранные элементы должны (предпочтительно) быть голубыми даже до щелчка по полю выбора, по крайней мере, в Chrome. (Это происходит по умолчанию с традиционными опциями множественного выбора в Firefox, но не Chrome.)

Одно из решений, на которое я смотрел, это Как избежать необходимости для ctrl-click в окне множественного выбора, используя Javascript? (среди прочих на этой странице) и его Fiddle (http://jsfiddle.net/xQqbR/1022). Это хорошее начало, но оно не отвечает моим требованиям 1, 3 и 6. Я вижу, что различные комментаторы указывали, что (и как) jQuery не должно требоваться для этого, но после попытки того, что они предложили, я не смог не получается, и я почти не знаю JavaScript, чтобы решить это сам.

Вот такая разметка, с которой я имею дело:

<select multiple size=3>
  <option>Option 1</option>
  <option>Option 2</option>
  <option disabled>Option 3 (disabled)</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option selected>Option 7 (selected)</option>
  <option disabled selected>Option 8 (disabled+selected)</option>
</select>

Заранее спасибо за ваше время и опыт.

Answer 1

var expanded = false;
function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

#select22 {
	border-radius: 4px;
	width: 100%;
     height: 30px;
	color: white;
    padding-bottom: 2px;
        background-color: #00ced1;
         border: 1px solid #00ced1;
      border-bottom: 0.5px solid white;
	/* Here's the code we need */
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	 -o-appearance: none;
		appearance: none;
}
.select-wrapper22:after {
	font-family: FontAwesome;
  	content: '\f107';
  	font-size: 20px;
  	position: absolute;
  	top: 6px;
  	right: 4px;
  	color: white;
  	pointer-events: none;
}
.select-wrapper22:after:hover{
    font-family: FontAwesome;
  	content: '\f107';
  	font-size: 20px;
  	position: absolute;
  	top: 6px;
  	right: 4px;
  	color: #00ced1;
  	pointer-events: none;
}
.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


#checkboxes {
    display: none;
    border: 1px #7e7e7e solid;
    background-color: white;
    padding-top: 10px;
}

#checkboxes label::before {
    display: block;
    font-family: Aller Light;
    background-color: white;
    color: #7e7e7e;
}

#checkboxes label::after {
    display: block;
    font-family: Aller Light;
    background-color: white;
    color: aqua;
}

#checkboxes label:hover {
    color: #00ced1;
}

#checkboxes label::after {
    color: #00ced1;
}
.cotner {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.cotner input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


.chmk {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
}


.chmk:after {
    content: "";
    position: absolute;
    display: none;
}


.cotner input:checked ~ .chmk:after {
    display: block;
    color: aqua;
}


.cotner .chmk:after {
    left: 9px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #00ced1;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

input[type=checkbox]:checked + label {
    color: red
}

 <div>
                        <p class="sideheadingdrop">Hard Skills<i style="" class="fa fa-exclamation-circle"></i></p>
                        <div  class="select-wrapper22" onclick="showCheckboxes()">
      <select id="select22" >
        <option value="" disabled selected hidden></option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one" class="cotner">
        <input type="checkbox" id="one" />
          <span class="chmk"></span>First checkbox</label>
      <label for="two" class="cotner">
        <input type="checkbox" id="two" />
          <span class="chmk"></span>Second checkbox</label>
      <label for="three" class="cotner">
        <input type="checkbox" id="three" />
          <span class="chmk"></span>Third checkbox</label>
    </div>
                    </div>

Я создал несколько флажков без использования Ctrl.