Как сделать так, чтобы при клике на элемент a или button на мобильном устройстве и его выделении учитывался border-radius?

Question

[ophelialifeeva]

Есть элементы (a или button) с заданным свойством border-radius:20px. У них есть фон:


При клике на элемент на мобильном устройстве они подсвечиваются синим цветом без учета border-radius, то есть как прямоугольник.

Answer 1

[Сергей delphinpro]

На сегодняшний день это невозможно.

Вы можете только поменять цвет подсветки ( https://developer.mozilla.org/en-US/docs/Web/CSS/-... ), все остальное недоступно для кастомизации.

UPD
Александр настаивает, что нужно давать варианты решения, даже если их нет =) ну ладно..

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

a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  position: relative;
  &::after {
    position: absolute;
    left 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: rgba(blue, 0.5);
    border-radius: 20px;
    display: none;
  }
  &.highlight::after {
    display: block;
  }
}

a.addEventListener('touchstart', e => {
  e.target.classList.add('highlight');
  setTimeout(() => e.target.classList.remove('highlight'), 500);
});

Стоит ли оно того — решать вам.

Answer 2

[ophelialifeeva]

Спасибо всем за ответы, на самом деле все комментарии оказались полезны. Они помогли мне закрыть некоторые пробелы в понимании быстрее и подкинули идеи для того, чтобы найти лучшее на мой взгляд решение.

Сергей delphinpro объяснил, что на сегодняшний день невозможно заставить свойство CSS, которое задает цвет выделения, появляющееся над ссылкой/кнопкой на мобильных устройствах при нажатии на нее, учитывать border-radius элемента. Поэтому мне пришлось отменить это свойство.
/*Отменить свойство CSS, которое задает цвет выделения, появляющееся над ссылкой/кнопкой на мобильных устройствах при нажатии на нее*/
a, button {-webkit-tap-highlight-color: transparent;}

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

Александр предложил применить эффект hover. Но на мобильных этот эффект остается после нажатия на элемент, что некорректно и может смутить пользователя. Я применяю :hover только при наведении мыши на элемент.
/*Задать стиль, который действует только при наведении мыши на элемент*/
@media(hover: hover) and (pointer: fine){
a:hover, button:hover {стиль при наведении мыши на элемент}
}
Тогда на мобильных не отрабатывает эффект.

Необходимо стилизовать и применить эффект, который срабатывает при нажатии на элемент и не остается после нажатия.
/*Задать свой стиль при нажатии на элемент*/
a:active, button:active {стиль при нажатии на элемент}



Также мне важно знать, есть ли какие недостатки этого варианта. Буду признательна за комментарии по этому поводу.