Как настроить тип входного диапазона HTML5, используя CSS?

Я хочу настроить внешний вид типа ввода диапазона в HTML5, чтобы выглядеть как индикатор выполнения. Я попытался применить некоторые общие атрибуты CSS с помощью класса CSS, но кажется, что они не работают.

Может ли кто-нибудь указать мне, как его настроить?

Ответы

Ответ 1

РЕДАКТИРОВАТЬ: в настоящее время все основные браузеры поддерживают как

Следовательно, вы должны использовать один из этих двух, как объяснено в других ответах, и это больше не должно быть принятым ответом.

<input type="range"> довольно новый, и вы уже пытаетесь настроить его с помощью CSS. :)

Я бы не стал это делать по двум причинам:

  1. могут возникнуть огромные проблемы совместимости сейчас и в течение следующих нескольких (или многих) лет. Подумайте, что в настоящее время элемент управления формы, такой как <select> (доступный с момента запуска Интернета), все еще остается проблематичным для настройки с помощью CSS кросс-браузерным способом. Например, если вы установите padding для полей выбора, многие браузеры (IE7, OPERA9, CHROME5, SAFARI4) будут полностью игнорировать заполнение. Работает только IE8 и на FF 3.6. (все тесты выполняются с HTML5 DOCTYPE, поэтому в стандартном режиме).

  2. <input type="range"> был создан, чтобы показывать слайдер, а НЕ индикатор выполнения, пытаясь обмануть его с помощью CSS, чтобы превратить слайдер в индикатор выполнения, это звучит странно. Как попытка использовать CSS для преобразования <textarea> в таблицу, но почему бы вам просто не использовать <table> для рендеринга таблиц?!

Чтобы отобразить индикатор прогресса в HTML5, вы должны следовать предложению, которое дал marcgg в своем ответе. Поскольку ни один браузер в настоящее время не отображает его, вы можете использовать простой div с ap внутри, например:

<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
   <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
</div>

Затем просто обновите style.width внутреннего элемента P в процентах, например:

width: 75%

К вашему сведению: если вы хотите сделать это простым JS, вот код:

document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';

Ответ 2

input[type='range'] {
    -webkit-appearance: none !important;
    background:red;
    height:7px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:blue;
    height:10px;
    width:10px;
}

Ответ 3

Если вы используете HTML 5, почему бы не использовать тег progress?

<progress value="1534602" max="4603807">33%</progress>

Ответ 4

Я сделал кросс-браузерное решение (+ IE9, FF, Chrome, Safari), только CSS.

[Обновлено 24.11.2016]

http://codepen.io/nlfonseca/pen/MwbovQ

@import 'bourbon';

$slider-width-number: 240;
$slider-width: #{$slider-width-number}px;
$slider-height: 2px;
$background-slider: #c7c7c7;
$background-filled-slider: #e33d44;
$thumb-width: 28px;
$thumb-height: 18px;
$thumb-radius: 8px;
$thumb-background: #fff;
$thumb-border: 1px solid #777;
$shadow-size: -8px;
$fit-thumb-in-slider: -8px;

@function makelongshadow($color, $size) {
  $val: 5px 0 0 $size $color;

  @for $i from 6 through $slider-width-number {
    $val: #{$val}, #{$i}px 0 0 $size #{$color};
  }

  @return $val;
}

div {
  height: 100px;
  display: flex;
  justify-content: center;
}

input {
  align-items: center;
  appearance: none;
  background: none;
  cursor: pointer;
  display: flex;
  height: 100%;
  min-height: 50px;
  overflow: hidden;
  width: $slider-width;

  &:focus {
    box-shadow: none;
    outline: none;
  }

  &::-webkit-slider-runnable-track {
    background: $background-filled-slider;
    content: '';
    height: $slider-height;
    pointer-events: none;
  }

  &::-webkit-slider-thumb {
    @include size($thumb-width $thumb-height);

    appearance: none;
    background: $thumb-background;
    border-radius: $thumb-radius;
    box-shadow: makelongshadow($background-slider, $shadow-size);
    margin-top: $fit-thumb-in-slider;
    border: $thumb-border;
  }


  &::-moz-range-track {
    width: $slider-width;
    height: $slider-height;
  }

  &::-moz-range-thumb {
    @include size($thumb-width $thumb-height);

    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
    position: relative;
  }

  &::-moz-range-progress {
    height: $slider-height;
    background: $background-filled-slider;
    border: 0;
    margin-top: 0;
  }

  &::-ms-track {
    background: transparent;
    border: 0;
    border-color: transparent;
    border-radius: 0;
    border-width: 0;
    color: transparent;
    height: $slider-height;
    margin-top: 10px;
    width: $slider-width;
  }

  &::-ms-thumb {
    @include size($thumb-width $thumb-height);

    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
  }

  &::-ms-fill-lower {
    background: $background-filled-slider;
    border-radius: 0;
  }

  &::-ms-fill-upper {
    background: $background-slider;
    border-radius: 0;
  }

  &::-ms-tooltip {
    display: none;
  }
}

Ответ 5

В Webkit вы можете использовать псевдоэлемент -webkit-slider-thumb: http://jsfiddle.net/leaverou/BNm8j/

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height:20px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #666;
    opacity: 0.5;
    width: 10px;
    height: 26px;
}
<input type="range" min="0" max="100" />

Ответ 6

Вы можете редактировать CSS ввода диапазона, используя input[type="range"]::-webkit-slider-thumb и input[type="range"].

Вот пример этого,

http://webstutorial.com/range-input-slider-html5-css3/html-5

Я знаю, что это уже ответили, но просто поделились им.

Ответ 7

jQuery Tools предоставляет плагин, который создает стилируемые элементы из ввода диапазона, и что еще, делает его по-прежнему работать как слайдер в старых браузерах, которые не поддерживают input[type=range].

Позволяет вам стиль:

  • дескриптор
  • слайдер
  • необязательный промежуток времени выполнения
  • значение поля вывода

Я использовал его много раз, и это отличный инструмент.

ПРЕДУПРЕЖДЕНИЕ: не работает на сенсорных устройствах. У меня не так много опыта, но вы можете попробовать мобильный слайдер jQuery: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

http://jquerytools.github.io/demos/rangeinput/index.html

Ответ 8

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

Вот простой слайдер javascript. В основном это img для слайдера, img для кнопки и обратного вызова с процентом прогресса. Не полный и танцевальный слайдер, но что-то простое в использовании.

Демо

HTML

<div id='bb_sliderContainer'  ondragstart="return false;" ondrop="return false;">
    <img id='bb_slider' src='slider.png'/>
    <img id='bb_sliderButton' src='sliderbutton.png'/>
</div>

script

Место в файле javascript:

(function(bb,undefined){    
bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
{
    var halfButtonWidth = 5;
    var sliderMoving = false;
    var buttonElement = document.getElementById(buttonCssId);
    var sliderElement = document.getElementById(sliderCssId);                
    var length = sliderElement.clientWidth;                
    var leftPos = 0;
    var rightPos = leftPos + length;
    length = rightPos - leftPos;              

    if( initialPercentage )
    {
        var buttonPos = leftPos + initialPercentage / 100 * length;
        buttonElement.style.left = buttonPos - halfButtonWidth + 'px';  
    }        

    buttonElement.addEventListener( 'mousedown', function(){ 
        sliderMoving = true;
    } );        

    document.addEventListener( 'mousemove', function(event){
        if( sliderMoving == true )
        {                      
            var rect = sliderElement.getBoundingClientRect();                                                                        
            var mouseX = event.clientX - rect.left;
            var prop = mouseX / length;
            if( prop < 0 )
            {
                prop = 0;
                mouseX = 0;
            }
            if( prop > 1 )
            {
                prop = 1;
                mouseX = length;
            }                
            buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';                
            progressUpdate(prop * 100);         
        }
    });
    document.addEventListener( 'mouseup', function(){
        sliderMoving = false;
    });
}    
}(window.bb = window.bb || {}));

Пример использования

HTML:

<img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>

JavaScript:

function sliderUpdate(percentage)
{
    var sliderSubject = document.getElementById('bb_sliderSubject');
    sliderSubject.style.width = percentage + '%';
}
window.onload=function()
{
    var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
}

Ответ 9

Это пример:

input[type='range'] {
	-webkit-appearance: none;
	border-radius: 5px;
	box-shadow: inset 0 0 5px #333;
	background-color: #999;
	height: 10px;
	vertical-align: middle;
}
input[type='range']::-moz-range-track {
	-moz-appearance: none;
	border-radius: 5px;
	box-shadow: inset 0 0 5px #333;
	background-color: #999;
	height: 10px;
}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	border-radius: 20px;
	background-color: #FFF;
	box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
	border: 1px solid #999;
	height: 20px;
	width: 20px;
}
input[type='range']::-moz-range-thumb {
	-moz-appearance: none;
	border-radius: 20px;
	background-color: #FFF;
	box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
	border: 1px solid #999;
	height: 20px;
	width: 20px;
}
<input type="range">

Ответ 10

См. http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range

Это инструмент, который создает кросс-браузерный код для создания как входных, так и внутренних входов, как вы хотите.

.ws-range, input[type="range"] {
    /* Range styles: width, height, border-radius, background */
    -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0;
}
.ws-range .ws-range-thumb {
    /* Thumb styles: width, height, border, border-radius, background */
}
.ws-range.ws-focus .ws-range-thumb {
    /* Thumb focus styles: border-color, background */
}
.ws-range.ws-active .ws-range-thumb {
    /* Thumb active styles: border-color, background */
}
.ws-range .ws-range-min {
    /* Thumb progress styles: display, background */
    border-radius: /* same as range */;
    height: 100%;
}
input[type="range"]::-moz-range-track {
    border: none;background: transparent;
}
input[type="range"]::-ms-tooltip {
    display: none;
}
input[type="range"]::-webkit-slider-thumb {
    /* Thumb styles: width, height, border, border-radius, background */
    -webkit-appearance: none;
}
input[type="range"]::-ms-track {
    /* Range styles: width, height, border-radius, background */
    color: transparent;border: 0;
}
input[type="range"]::-moz-range-thumb {
    /* Thumb styles: width, height, border, border-radius, background */
}
input[type="range"]::-ms-thumb {
    /* Thumb styles: width, height, border, border-radius, background */
}
input[type="range"]:focus::-webkit-slider-thumb {
    /* Thumb focus styles: border-color, background */
}
input[type="range"]:focus::-moz-range-thumb {
    /* Thumb focus styles: border-color, background */
}
input[type="range"]:focus::-ms-thumb {
    /* Thumb focus styles: border-color, background */
}
input[type="range"]:active::-webkit-slider-thumb {
    /* Thumb active styles: border-color, background */
}
input[type="range"]:active::-moz-range-thumb {
    /* Thumb active styles: border-color, background */
}
input[type="range"]:active::-ms-thumb {
    /* Thumb active styles: border-color, background */
}
input[type="range"]::-moz-range-progress {
    /* Thumb progress styles: display, background */
    border-radius: /* same as range */;
    height: 100%;
}
input[type="range"]::-ms-fill-lower {
    /* Thumb progress styles: display, background */
    border-radius: /* same as range */;
    height: 100%;
}
.no-cssrangeinput input[type="range"] {
    background: transparent;margin: 0;border: 0;min-height: 51px;
}