実現したいこと
SP(iphone)で見た際、チェックボックスのチラつきをなくしたい。
発生している問題・分からないこと
SP(iphone)時、チェックボックスをクリックした際にチラつく。
labelタグなのか一瞬残像のようなものが見える。
エラーメッセージ
error
1特にエラーメッセージは出ていません。
該当のソースコード
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .wap { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } label { width: 48%; display: inline-block; margin-top: 3vw; } input[type="checkbox"] { position: absolute; opacity: 0; } span{ width: 100%; height: 8.55vw; line-height: 8.55vw; border-radius: 10vw; background: #e6e6e6; text-align: center; display: inline-block; padding: 0 3vw; font-size: 3vw; } label input:checked + span{ background: #000; color: #fff; } </style> </head> <body> <div class="wap"> <label> <input type="checkbox" value="選択A"> <span>選択A</span> </label> <label> <input type="checkbox" value="選択B"> <span>選択B</span> </label> <label> <input type="checkbox" value="選択C"> <span>選択C</span> </label> </div> </body> </html>
試したこと・調べたこと
上記の詳細・結果
spanのcssに以下などは追記してみましたが、改善しません。
transition: background 0.3s, color 0.3s;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
補足
特になし
0 コメント