Тип ввода текста HTML5, цвет, поддержка диапазона в Firefox и Internet Explorer

Я создал весь свой сайт, используя множество форм с HTML5 (используя типы input date, color и range.)

Все работает отлично в Google Chrome.

Но когда я включаю Internet Explorer и Firefox, все поля ввода становятся похожими на input type text.

Есть ли способ или script, который я могу загрузить, чтобы сделать правильное отображение этого ввода?

Ответ 1

Поскольку HTML5 еще не полностью стандартизирован, не все браузеры поддерживают эти типы ввода. Предполагаемое поведение - вернуться к <input type="text">.

↪ См. здесь дополнительную информацию о поддержке браузером типов ввода HTML5.

Вы можете протестировать поддержку с использованием библиотеки Modernizr или с помощью специального пользовательского JavaScript. Если вы обнаружите, что определенная функция HTML5 недоступна, вы можете вернуться к JavaScript - альтернативы.

Ответ 2

Все браузеры возвращаются к типу ввода текста, если отсутствует специальный ввод. Все о виджетах и проверке.

Следующий виджет диапазона поддержки

Firefox Desktop 23

Opera Desktop

Chrome Desktop

Chrome Mobile

IOS safari 5

Следующие браузеры теперь поддерживают цветной виджет

Firefox Desktop 29

Opera Desktop 11

Chrome Desktop 20:

Android 4.4/Chrome Mobile:

Opera mobile:

Blackberry:

Firefox os 1.3

Firefox os теперь поддерживает цветовой ввод, но у меня все еще нет снимка экрана

Если вы хотите, чтобы u мог использовать этот http://www.eyecon.ro/colorpicker/

Ответ 3

У меня была аналогичная проблема с типом input = range. Все работало во всех браузерах, за исключением Internet Explorer 10. Это не проблема с Internet Explorer, поскольку я мог видеть слайдер на других сайтах. Решение состояло в том, чтобы отключить отображение совместимости для моего веб-сайта.

Ответ 4

лучшее решение, я думаю, это использовать плагины jquery.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css'; return false;" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#slider" ).slider();
  });
  </script>
</head>
<body>

<div id="slider"></div>


    </body>

</html>

http://jqueryui.com/slider/