Диапазон типов ввода HTML5 для вертикальной ориентации Firefox? - PullRequest
8 голосов
/ 07 декабря 2011

Интересно, знает ли кто-нибудь там, возможна ли вертикальная ориентация в диапазоне типа input в FireFox.

Я знаю, что в Chrome и Safari вы можете сделать:

-webkit-appearance: slider-vertical;

И я попробовал что-то подобное в FireFox:

HTML

<input type="range" name="range" min="0" max="9" step="1" value="3" />

CSS

input[name=range] {
  width: 150px;
  height: 10px;
  -moz-transfrom: rotate(270deg);
}

Несмотря на то, что это создает желаемый эффект, ориентация диапазона input указатель по умолчанию все еще требует перетаскивания влево и вправо для его изменения, а не вверх и вниз, как ожидалось.

Вот Пример , должен просматриваться в FireFox.

Любая новая и интересная информация по этому вопросу будет принята с благодарностью, спасибо!

Ответы [ 3 ]

1 голос
/ 09 января 2015

Похоже, что в последних обновлениях для Firefox они решили эту проблему.Вот обновленная скрипка

<input type="range" name="range" min="0" max="9" step="1" value="3" />

и CSS

input[name=range] {
    position:relative;
    top: 100px;
    width: 150px;
    height: 10px;
    border: 0

    -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
            transform: rotate(270deg);
}
0 голосов
/ 27 января 2012

Firefox не поддерживает <input type="range">. В вашем примере используется polyfill для ползунка fryn , поэтому вам необходимо сообщить об ошибке на трекере gryub для fryn.

0 голосов
/ 07 декабря 2011

Рассматривали ли вы взглянуть на реализацию слайдера jqueryui? http://jqueryui.com/demos/slider/#slider-vertical

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...