Firefox внезапно показывает контур фокуса после нажатия. Как я могу избежать контура после щелчка, но оставить его для фокусировки клавиатуры? - PullRequest
Новая
       21

Firefox внезапно показывает контур фокуса после нажатия. Как я могу избежать контура после щелчка, но оставить его для фокусировки клавиатуры?

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

Я использую Firefox 75.0 на Windows 10, и с сегодняшнего дня мои кнопки получают пунктирный контур после нажатия. Насколько я могу судить, я использую ту же версию Firefox, что и вчера, и я ничего не изменил в своем коде, но набросок после нажатия кнопки был новым.

вот фрагмент из моего кода svelte используя <Link> из svelte-routing (для стилизации я использую materialize- css с некоторыми пользовательскими изменениями):

svelte: 

<li class="nav-item">
  <Link {to}>
    <span class="icon-button">
      <i class="material-icons icon-button">{icon}</i>
    </span>
  </Link>
</li>

рендеринг HTML: 

<li class="nav-item svelte-l3ibn0">
  <a href="/" aria-current="page">
    <span class="icon-button svelte-l3ibn0">
      <i class="material-icons icon-button svelte-l3ibn0">home</i>
    </span>
  </a>
</li>

перезапись материализации- css для пользовательского стиля: 

 .nav-item {
    width: calc(var(--nav-size) * 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-button {
    --button-size: calc(var(--nav-size) * 0.5);
    width: var(--button-size);
    height: var(--button-size);
    background-color: #484a4d;
    border-radius: 50%;
    padding: 18px;
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 300ms;
  }

  .icon-button:hover {
    filter: brightness(1.2);
  }

  .icon-button i {
    fill: var(--text-color);
    width: 10px;
    height: 10px;
  }

и вот как это выглядит - Не нажал , после того, как я щелкнул по нему

Я только учусь svelte, и я довольно новичок в разработке frondend. Возможно, мне не хватает чего-то простого.

заранее спасибо.

1 Ответ

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

Это, вероятно, Firefox добавление структуры к вашим ссылкам на фокус / активный. Вы можете удалить его, установив контур в none: 

.nav-item a {
  outline: 0;
}

Если это не сработает, попробуйте сбросить его следующим образом: 

.nav-item a,
.nav-item a:focus,
.nav-item a:active {
  outline: 0;
}

Просто имейте в виду, что вы можете вызвать проблемы для людей, перемещающихся по Интернету с помощью клавиатуры, вот больше информации об этом .

...