Как избавиться от лесенок outline в кнопке с псевдоэлементом?

Question

[Muvka]

Вот такая проблема - делаю стрелку border псевдоэлемента с поворотом. Но при фокусе появляется такая некрасивая обводка

Помог padding в 1px и, вероятно, прозрачный border

Впринципе неплохо, без учета того, что элемент стал больше, но может есть какой другой, более красивый способ?

Answer 1

[WapSter]

:before :after по умолчнаию строчные элементы, сделай их блочными или строчно-блочными, по идее должно помочь.

Comments

[Muvka]

Они, в данном случае, являются флекс элементами. Выравнивание в строке по центру так проще делать.

[WapSter]

Muvka, странно как у тебя это вообще получилось, обычно outline при фокусе отталкивается от родителя, можешь дать css код родителя и псевдоэлемента.

[Muvka]

.dropdown-menu__button {
  display: flex;
  align-items: center;
  padding: 1px 10px 1px 1px;

  font-size: 14px;
  line-height: 16px;
  color: #1C1C1C;

  border: none;
  background-color: transparent;
  -webkit-appearance: none;
  cursor: pointer;

  transition: color 0.3s ease;

  &::after {
    content: '';

    margin-left: 6px;

    border-width: 3px;
    border-style: solid;
    border-color: transparent #0C0C0C #0C0C0C transparent;

    transform-origin: 75% 75%;
    transform: rotate(45deg);

    transition: border-color 0.3s ease;
  }
}

[WapSter]

Muvka, как я и сказал в твоем случае достаточно сделать блоком

[Muvka]

WapSter, А теперь добавьте псевдоэлементу transform: rotate(45deg);

[WapSter]

Muvka, тогда используй другой метод добавления псевдоэлемента, код обновил

[Muvka]

WapSter, Как вариант, спасибо.

Answer 2

[fallus]

*, *::before, *::after{
  box-sizing: border-box;
  outline: none;
}

А если нужно выделать рамкой при фокусировке:

select{
 border: 2px solid transparent
}
select:focus{
  border-color: red
}

Comments

[Muvka]

Не хочется лишать пользователей возможности навигации с клавиатуры) А border - можно прозрачный задать и проблема решится, как я в вопросе и написал)