Удобные для прикосновения переключатели для мобильных устройств?
Я использую WordPress и WP Pro-Quiz для создания викторины.
Каждый ответ имеет переключатель сбоку (input type="radio"). Когда я нажимаю в любом месте той же строки на сенсорном экране своего компьютера, переключатель проверяется.
Но когда я нажимаю на строку на своем мобильном устройстве (в данном случае iPod touch), переключатель не проверяется. Я должен нажать точно на крошечный переключатель, чтобы проверить это.
Итак, я вижу два возможных способа решения эта проблема. Либо я пытаюсь сделать большой переключатель, либо я пытаюсь сделать всю строку "помеченной".
Какой был бы самый простой подход? Не мог бы кто-нибудь, пожалуйста, указать мне правильное направление?
2 answers
Если вы используете тег <label> для текста рядом с переключателем, он должен сделать этот текст кликабельным даже в мобильных браузерах.
<input type="radio" name="gender" id="male" value="male"><label for="male">Male</label><br>
<input type="radio" name="gender" id="female" value="female"><label for="female">Female</label><br>
Переключатели могут быть неудобными на устройствах Apple, поэтому вместо них следует использовать Кнопки пользовательского интерфейса .
Другая проблема может заключаться в том, что z-индекс на переключателях не установлен, что означает, что вы нажимаете на форму, а не на элемент.