Как остановиться: активное распространение CSS Click ⇐ CSS

[Anonymous]

В нашем приложении пользователи могут выбрать «карту», ​​нажав на нее. Мы используем CSS : Active псевдо -селектор, чтобы представить визуальное подтверждение их выбора. Все работает нормально. К сожалению, щелчок внутри текстового поля запускает селектор : active , что делает его, как будто пользователь уже выбрал опцию еще до того, как они ввели свой текст.
Вот минимальная скрипка, которая показывает проблему:
https://jsfiddle.net/nh3kazcu/2/
< P> Как вы можете видеть из скрипки, мы пробовали как event.stoppropagation (), так и event.preventdefault (), без успеха: < /p>

body {
background-color:#000000;
}
.card {
background-color: #8f97a3;
width:200px;
height:200px;
margin:10px;
}
.card div, .card input {
margin:6px;
padding:6px;
}
.card:active {
background-color:#b9bec5;
margin:10px 6px 10px 14px;
}< /code>

1


2



< /code>
< /div>
< /div>
< /p>
Как мы сохраняем логику выбора карты и добавляем простой текст- В окне, чтобы пользователь мог ввести пользовательское значение?>

Подробнее здесь: https://stackoverflow.com/questions/794 ... ropagation