Переключатель CSS работает, кроме IOS

Я пробовал этот код для кругового тумблера, он отлично работает для Android, но не работает для iOS.

Ниже приведена ссылка на код, который я использовал для написания кода ниже.

Ссылка, откуда используется код

код:

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: rgb(33, 159, 243);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: white;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}
<label class = "switch" data-align = "right">
  <input type = "checkbox" id = "togBtn" value = "false">
  <span class = "slider round"></span>
</label>

В приведенном выше коде нет JS. Это чистый CSS

mplungjan 03.12.2018 07:29

на ios очень тяжело давить

govind 03.12.2018 08:15

Код из w3schools, не рекомендуемый ресурс, отлично работает в Chrome и Safari на iOS 12. Какие у вас проблемы?

mplungjan 03.12.2018 09:07
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
38
0

Другие вопросы по теме

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

База данных H2. Ошибка обновления поля CLOB со значением html
Множественный список элементов с автоматической прокруткой
Почему я получаю ошибку неперехваченной ссылки при попытке доступа к этой глобальной переменной?
Как я могу заставить этот отключенный ввод действовать как включенный и прокручивать при нажатии кнопок?
Сайт замедляется после загрузки файла данных JSON размером 50 МБ
Как я могу отредактировать размер заднего фонового поля, чтобы он соответствовал внутренним ящикам с помощью node.js
При использовании атрибута name с ngModel в теге формы ошибка по-прежнему возникает - «Если ngModel используется в теге формы, необходимо установить атрибут name ...»
Мое фоновое изображение не раскрывается полностью или не отображается в полном размере. Проблема с фоновым изображением в разделе html
Предотвращение переноса div на меньший экран html css
Как сделать POST-запрос в HTML, не открывая новую вкладку