Google chrome vertical

En la ópera, puedo hacer lo siguiente

 #range{ width: 20px; heigth: 300px; }   

y renderizará un control deslizante vertical. Sin embargo, esto no parece funcionar en Chrome. ¿Hay alguna manera de que pueda hacer esto? (No estoy buscando ningún control deslizante jQuery ni nada)

Parece que Chromium todavía no implementa soporte para esto todavía:

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

Aun no está disponible

  • Localización de
  • IU dedicadas para los tipos de color, fecha, fecha y hora, hora local, mes, hora y semana
  • Cambio automático a rango vertical
  • Valor algoritmos de desinfección
  • elemento datalist, atributo de lista y propiedades de list / selectedOption

Editar: Vuurwerk indicó que en realidad es posible alterar la presentación usando la -webkit-appearance: slider-vertical . Aunque esto no lo transforma en un control deslizante vertical, no recomendaría hacer esto, ya que romperá su diseño y no se ve realmente bonito: ejemplo .

Si realmente desea un control deslizante vertical, use una solución de JavaScript . El soporte para es muy básico en este momento de todos modos, por lo que probablemente esté mejor con una graciosa degradación o un enfoque de mejora progresiva.

-webkit-appearance: slider-vertical;

¿Tal vez con una transformación css?

 -webkit-transform: rotate(90); 

Otra solución podría ser usar el módulo deslizante de jQuery UI.
http://jqueryui.com/demos/slider/#slider-vertical

 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; } 

Como dijo Aron, no hay soporte para el navegador webkit.

Sin embargo, esto es lo que podría hacer para lograr la salida.

 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; }