Применить стиль к кнопке при нажатии с помощью CSS только на сенсорных устройствах?

Можно ли стилизовать кнопку на сенсорных устройствах только с помощью CSS?

Я знаю, что :hover работает для добавления стиля, но я не могу удалить стиль, когда пользователь нажимает кнопку на фон страницы.

Есть ли решение только для CSS или мне нужно углубиться в JS?

html css

25.03.2019 11:50

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

189

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете использовать :focus

.btn{
  border: solid 0px;
  color: white;
  background-color:blue;
  padding:4px 10px;
  font-weight: 450;
  font-size: 15px;
}

.btn:hover,
.btn:focus{
  cursor: pointer;
  background-color:green;
}

<input 
class = "btn" 
type = "submit" 
value = "Button" 
>

Пытаться

<body ontouchstart = "">
...
</body>

Источник

Не работает. Стиль не удаляется при нажатии на кнопку.

— 25.03.2019 12:06

Я думаю, это должно работать, это то, что делает класс :focus.

— 25.03.2019 12:07

Возможно :focus так не работает на сенсорных устройствах.

— 25.03.2019 12:10

25.03.2019 12:00

Попробуй это:

body::after{ content: "I don't know what you are using to click" }

@media (pointer: coarse) {
  body { background: crimson }
  body::after{ content: "Your primary input mechanism is a finger" }  
}

@media (pointer: fine) {
  body { background: goldenrod }
  body::after{ content: "Your primary input mechanism is a mouse" }
}

Не отвечает на вопрос.

— 25.03.2019 12:04

25.03.2019 12:03

Используйте : активный.

button {
  background: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 5px 10px -5px blue;
  cursor: pointer;
}

button:active {
  box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
  transform: scale(0.9);
}