HTML / CSS - Контрольный список с использованием диапазона и on: focus - PullRequest
Новая
       68

HTML / CSS - Контрольный список с использованием диапазона и on: focus

0 голосов
/ 25 мая 2020

Я пытаюсь установить красный цвет рамки диапазона, когда я ': focus' на ссылке. Диапазон меняет цвет на ': active', но, кажется, ничего не происходит, когда я использую ': focus'. Категории будут выводить различные типы продуктов при нажатии, используя angular. На данный момент, когда я нажимаю на один из фильтров, нет никаких признаков того, что одна из категорий была активирована, что сильно влияет на UX. Я надеюсь сделать это с html и css, только если это возможно. 

<div class="checklist categories">
    <ul>
        <li><a><span></span>All</a></li>
        <li><a><span></span>House Favourites</a></li>
      </ul>
 </div> 

.checklist ul li{   
    font-size:14px;
    font-weight:400;
    list-style:none;
  padding: 7px 0 7px 23px;
  cursor: pointer;
}
.checklist li span{
    float:left;
    width:11px;
    height:11px;
    margin-left:-23px;
    margin-top:4px;
    border: 1px solid #d1d3d7;
  position:relative;    
}

.checklist li a{
    color:#676a74;
    text-decoration:none;   
}
.checklist li a:hover{  
    color:#222;
}

.categories a:hover span{   
    border-color:#a6aab3;
}

.checklist .checked span{
    border-color:#8d939f;
}

.checklist a:active span {
  background-color: red;
}

// This code below is the issue as :focus seems to do nothing

.checklist a:focus span {
  background-color: red;
}

1 Ответ

0 голосов
/ 26 мая 2020

Мне было предложено решение для этого с использованием Angular и машинописного текста:

Код

...