Элемент HTML не получает фокус при нажатии

Question

Мне нужны элементы, чтобы сфокусироваться на щелчке, что вызовет специальные CSS для них, меняя их цвет и цвет (например, первый элемент). Я достиг текущего результата, задав вручную: фокус на элемент из Chrome Dev-Tools.

.btns>span:focus {
  color: #2DB46A;
  background-color: #fff;
}

.btns>span {
  padding: 12px 0 8px 20px;
  color: #fff;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.btns {
  list-style-type: none;
  color: #fff;
  background-color: #2DB46A;
  font-family: Facile;
  font-size: 18px;
  margin-bottom: 50px;
}

<ul id="list-container">
  <li class="btns"><span>pcb design</span></li>
  <li class="btns"><span>analog design</span></li>
  <li class="btns"><span>power design</span></li>
  <li class="btns"><span>wireless design</span></li>
  <li class="btns"><span>fpga design</span></li>
  <li class="btns"><span>embedded software</span></li>
</ul>

Как получить результат, подобный первому элементу при нажатии для каждого из элементов.

Answer 1

Этот ответ основан на ответе Барра J .По его словам, используйте tabindex и :focus селектор.Поэтому я думаю, что вы должны пометить его ответ как принятый.

Кроме того, но, возможно, вы сделали это специально, продолжайте стилизовать подэлемент span, а не li, иначе граница фокуса (пунктирная)серый) покроет оранжевый (по крайней мере, Firefox), и в итоге вы получите уродливый рендеринг.

.btns:focus > span {
  color: #2DB46A;
  background-color: #fff;
  border:1px solid orange;
}

Кстати, вы должны определить размер элемента span в соответствии с его рамкой,в противном случае он будет больше элемента ul из-за его значения заполнения:

.btns>span {
  padding: 12px 0 8px 20px;
  box-sizing:border-box; /* Here */
}

ниже рабочего фрагмента.

.btns {
  margin-bottom: 50px;
  list-style-type: none;
  font-family: Facile;
  font-size: 18px;
  background-color: #2DB46A;
  color: #fff;
}

.btns>span {
  padding: 12px 0 8px 20px;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.btns:focus>span {
  color: #2DB46A;
  background-color: #fff;
  border: 1px solid orange;
}

<ul id="list-container">
  <li class="btns" tabindex="0"><span>pcb design</span></li>
  <li class="btns" tabindex="1"><span>analog design</span></li>
  <li class="btns" tabindex="2"><span>power design</span></li>
  <li class="btns" tabindex="3"><span>wireless design</span></li>
  <li class="btns" tabindex="4"><span>fpga design</span></li>
  <li class="btns" tabindex="5"><span>embedded software</span></li>
</ul>

Answer 2

Обратите внимание Уровень HTML DOM 2 Характеристики:

Элемент фактически не будет фокусироваться, если не выполнено одно из следующих действий:

• HTMLAnchorElement / HTMLAreaElement сhref
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement, но не с disabled (IE на самом деле выдает ошибку, если вы пытаетесь), и загрузка файлов имеет необычное поведение по соображениям безопасности
• HTMLIFrameElement (хотя фокусировка не делает ничего полезного).Другие элементы встраивания также, возможно, я не проверял их все.
• Любой элемент с tabindex

Так что если вы хотите, чтобы ваш .btns>span:focus действительно сфокусировался,вам нужно будет присвоить tabindex вашему элементу.

---

Отредактировано для добавления:

Пример Уэстон Рутер можно найти здесь