Почему input checked сохраняется при перезагрузке страницы?

Question

Stanislav @Stas2021

Почему input checked сохраняется при перезагрузке страницы?

Добрый день!

Столкнулся с такой проблемой.
Есть тег <*input type="checkbox"*>

Когда пользователь отмечает элемент (т.е. элемент становится checked) применяется стиль:

input:checked{
animation:st 1.1s ease-in 0.5s both;}

@keyframes st{from{opacity:1;}to{opacity:0;display:none;}}

Как минимум в Firefox 70.0.1 и IE11 при перезагрузке страницы элемент оказывается checked по умолчанию, что вызывает его анимацию (пропадание) без действий пользователя.

Т.е. если пользователь отметил checkbox - сheckbox пропал - перезагрузил страницу - checkbox появился отмеченным и пропал.

В Chrome и Opera такого не происходит.

Кто-нибудь может объяснить почему так происходит и что можно сделать?

Вопрос задан более трёх лет назад
354 просмотра

3 комментария

Подписаться 1 Простой 3 комментария

Андрей Саныч @mountpoint

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

Написано более трёх лет назад

Stanislav @Stas2021 Автор вопроса

Да весь код я и написал.
Скриптов никаких нет.

<style>

input:checked, input:checked + label{
animation:st 1.1s ease-in 0.5s both;}

@keyframes st{from{opacity:1;}to{opacity:0;display:none;}}

</style>


</head>

<body>


<input type="checkbox"><label>ОК</label>


</body>

Написано более трёх лет назад

Stanislav @Stas2021 Автор вопроса

Mellorn, спасибо!

В FireFox сработало. На побороть IE я и не рассчитываю)))

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Stanislav @Stas2021 Автор вопроса

На чистой пробовал - тоже самое в опере и хроме по умолчанию "unchecked", в firefox и IE - наоборот.

checkbox применяется для предупреждения о кукис на версии сайта с отключенным js.
input:checked - это единственное, что я смог придумать насчет того как скрыть это предупреждение, если пользователь с ним согласен.

button же не может скрыться и скрыть блок по клику без js... поэтому наверное не подойдет...

Написано более трёх лет назад
arsenty @arsenty
Stanislav, а в чём тогда проблема? Я отказался от кукиксов, больше мне это сообщение не показывается, даже с выключенным джс, удобно же. Ну а если показывается тем, у кого это состояние не сохраняется, что поделать, такое поведение браузера, пусть радуются, что вообще хоть как-то без джс работает :).

Ну а если хотите, чтобы все мучались на равных, можете что-нибудь типа такого сделать, если я вас правильно понял:

<button autofocus>Warning!</button> <span>Yes</span> <style>button:not(:focus) + span { display: none;}</style>
Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

Простой
Не могу задать ширину таблицы html?
- 1 подписчик
- вчера
- 63 просмотра
1

ответ
CSS

+1 ещё

Простой
Daysi UI — изменить цвет, icon навигационного меню?
- 1 подписчик
- вчера
- 42 просмотра
1

ответ
HTML

+1 ещё

Простой
Как сделать так, чтобы содержимое defs работало?
- 1 подписчик
- 06 мая
- 46 просмотров
0

ответов
CSS

Простой
Как удалить все префиксы из css?
- 1 подписчик
- 06 мая
- 79 просмотров
1

ответ
HTML

+1 ещё

Простой
Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?
- нет подписчиков
- 05 мая
- 89 просмотров
1

ответ
CSS

Простой
Как создать нормальный размер картинки на php?
- 1 подписчик
- 05 мая
- 67 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Галерея через сборку строки JS не позиционируется?
- 1 подписчик
- 05 мая
- 111 просмотров
0

ответов
CSS

Простой
Как сверстать не стандартный макет?
- 1 подписчик
- 04 мая
- 104 просмотра
2

ответа
HTML

+1 ещё

Простой
Почему схлопываются внешние отступы соседних элементов?
- 1 подписчик
- 04 мая
- 77 просмотров
0

ответов
CSS

+3 ещё

Простой
Как увеличить QPushButton на 105% через stylesheet?
- 1 подписчик
- 04 мая
- 40 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Парсинг свободных билетов

08 мая 2024, в 20:15

50000 руб./за проект

Верстка сайта

08 мая 2024, в 20:07

7000 руб./за проект

Софт на js

08 мая 2024, в 20:04

10000 руб./за проект

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

<style> input:checked, input:checked + label{ animation:st 1.1s ease-in 0.5s both;} @keyframes st{from{opacity:1;}to{opacity:0;display:none;}} </style> </head> <body> <input type="checkbox"><label>ОК</label> </body>
Mellorn, спасибо!

В FireFox сработало. На побороть IE я и не рассчитываю)))

Answer 1 · 2021-04-27 19:26:48

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

Если вам нужно, чтобы checkbox при перезагрузке страницы сбрасывался, то вы выбрали не самый подходящий html-элемент. Если вам нужен checkbox только для визуала, лучше использовать button.

Почему input checked сохраняется при перезагрузке страницы?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт