Сообщение # 1 | 17:43:20
Ссылка к странице http://www.divanhik.com/tests/0-9-0
Проблема такая, при нажатии на выбор ответа не могу зафиксировать цвет.
Человек выбирает ответ и оранжевая кнопка становится красной.
Это можно реализовать при помощи скриптов js, но тогда скрипт входит в конфликт с программным id и ответ не фиксируется вобще хотя цвет кнопки меняется. Только при CSS стилях нет конфликта между программным кодом Теста и стилями.
вот код кнопки -

.main {
text-align: center;
justify-content: center;
margin-bottom: 7px;
display: inline-block;
background: #FF8C00;
height: 70px;
border-radius: 8px;
width: 350px;
padding: 15px;
transition-duration: 0.5s;
color: #fff;
font-size: 1.3em;
font-family: 'Philosopher', sans-serif;
cursor: pointer;
}
.main:hover {
background: #FF0000;
transition-duration: 0.5s;
border-radius: 8px;
font-size: 1.3em;
font-family: 'Philosopher', sans-serif;
cursor: pointer;
}
.main:active{
background: #B22222;
transition-duration: 0.5s;
border-radius: 8px;
font-size: 1.3em;
font-family: 'Philosopher', sans-serif;
cursor: pointer;
}

Интересно то что на планшете через браузер Гугл всё работает как надо, а через комп в том же гугле нет.
В идеале было бы конечно что бы при нажатии на ответ в Тесте пользователь автоматически переходил к следующему вопросу, без подтверждения ответа отдельной кнопкой (это действие не логично), но как сие реализовать совсем не понимаю.

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

поиграл чуть переходами transition-duration: 4.5s;
но это не то
Сообщение отредактировал Kотыгорох - Суббота, 18 Мар 2017, 20:56:23