Google Chrome Vertical <input type = "range" />

Question

В опере я могу сделать следующее

<style>
#range{
 width: 20px;
 heigth: 300px;
}
</style>

<input type="range" id="range" />

, и он отобразит вертикальный ползунокТем не менее, это не похоже на работу с Chrome.Есть ли способ, которым я могу сделать это?(Я не ищу ползунки jQuery или что-то еще)

Answer 1

Похоже, что в Chromium пока нет поддержки для этого:

См .: http://www.chromium.org/developers/web-platform-status/forms

Нет в наличии

• Локализация
• Выделенные пользовательские интерфейсы для цвета, даты, даты и времени, даты и времени в местном масштабе, месяца, времени, и недельные типы
• Автоматическое переключение на вертикальный диапазон
• Значение алгоритмов санации
• элемент списка данных, атрибут списка и свойства list / selectedOption

Редактировать: Vuurwerk * ​​1029 * указывает , что на самом деле можно изменить презентацию, используя свойство -webkit-appearance: slider-vertical. Хотя это превращает в вертикальный слайдер, я бы не советовал делать это, поскольку он сломает ваш макет и выглядит не очень красиво: пример .

Если вы действительно хотите вертикальный ползунок, используйте решение JavaScript . В любом случае, поддержка <input type="range" /> является в настоящее время очень базовой, поэтому вам, вероятно, лучше воспользоваться подходом постепенного ухудшения или постепенного улучшения.

Answer 2

-webkit-внешний вид: слайдер-вертикаль;

Answer 3

Может быть с преобразованием CSS?

-webkit-transform: rotate(90);

Другим решением может быть использование модуля слайдера из пользовательского интерфейса jQuery.
http://jqueryui.com/demos/slider/#slider-vertical

Answer 4

input[type='range']{        
    width:20px;
    height:140px;
    border:2px solid blue;
    display:block;
    -webkit-transform:rotate(90deg); /* Safari and Chrome */        
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    z-index: 0; 
}

Answer 5

Как сказал Арон, браузер Webkit не поддерживает.

Однако это то, что я мог сделать для достижения результата.

body {
  margin: 50px;
}
.opacitySlider {
  position: relative;
  transform: rotate(90deg);
  width: 125px;
  height: 20px;
}
.opacitySlider:before {
  content: " ";
  left: 10px;
  top: 1px;
  position: absolute;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 115px solid #ccc;
}
.opacitySlider input[type=range] {
  outline: none;
  -webkit-appearance: none;
  height: 20px;
  padding: 0;
  width: 125px;
  background: transparent;
  position: relative;
  margin: 0;
  cursor: pointer;
}
.opacitySlider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #69a80e;
  height: 20px;
  width: 20px;
  border: 1px solid #fff;
  border-radius: 50%;
}
.opacitySlider input[type=range]::-moz-range-track {
  border: none;
  background-color: transparent;
}
.opacitySlider input[type=range]::-moz-range-thumb {
  background: #69a80e;
  height: 20px;
  width: 20px;
  border: 1px solid #fff;
  border-radius: 50%;
}
.opacitySlider input[type=range]::-ms-fill-lower, .opacitySlider input[type=range]::-ms-fill-upper {
  background: transparent;
}
.opacitySlider input[type=range]::-ms-track {
  height: 18px;
  border: none;
  background-color: transparent;
  margin: 0;
}
.opacitySlider input[type=range]::-ms-thumb {
  background: #69a80e;
  height: 20px;
  width: 20px;
  border: 1px solid #fff;
  border-radius: 50%;
  height: 17px;
  width: 17px;
}

<div class="opacitySlider">
  <input step="any" type="range">
</div>