Как сделать так, чтобы при клике на элемент a или button на мобильном устройстве и его выделении учитывался border-radius?
Есть элементы (a или button) с заданным свойством border-radius:20px. У них есть фон:
При клике на элемент на мобильном устройстве они подсвечиваются синим цветом без учета border-radius, то есть как прямоугольник.
Дополнительно:
На сегодняшний день это невозможно.
Вы можете только поменять цвет подсветки ( 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 { -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); }); |
a.addEventListener('touchstart', e => { e.target.classList.add('highlight'); setTimeout(() => e.target.classList.remove('highlight'), 500); });
Стоит ли оно того — решать вам.
Спасибо всем за ответы, на самом деле все комментарии оказались полезны. Они помогли мне закрыть некоторые пробелы в понимании быстрее и подкинули идеи для того, чтобы найти лучшее на мой взгляд решение.
Сергей 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 {стиль при нажатии на элемент}
Также мне важно знать, есть ли какие недостатки этого варианта. Буду признательна за комментарии по этому поводу.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы обеспечить корректное отображение border-radius при клике на элемент a или button на мобильном устройстве, вам следует добавить следующий CSS код:
a, button { -webkit-tap-highlight-color: transparent; /* отключаем стандартное выделение при клике */ } a:focus, button:focus { outline: none; /* убираем стандартное выделение при фокусе */ }
Этот код позволит избежать стандартного выделения элемента при клике на мобильном устройстве. Однако, чтобы учитывать border-radius при клике, вам следует также добавить следующий CSS код:
a, button { -webkit-tap-highlight-color: transparent; /* отключаем стандартное выделение при клике */ -webkit-border-radius: 10px; /* устанавливаем border-radius */ border-radius: 10px; /* устанавливаем border-radius */ } a:focus, button:focus { outline: none; /* убираем стандартное выделение при фокусе */ }
После применения этого CSS кода, при клике на элемент a или button на мобильном устройстве и его выделении будет учитываться border-radius. Не забудьте также протестировать отображение на различных мобильных устройствах, чтобы убедиться, что стили корректно работают на всех платформах.