web-dev-qa-db-fra.com

Comment personnaliser l'apparence du type de plage d'entrée HTML5 à l'aide de CSS?

Je souhaite personnaliser l'apparence du type d'entrée de plage en HTML5 pour qu'il ressemble à une barre de progression. J'ai essayé d'appliquer certains attributs CSS courants à l'aide de la classe CSS, mais il semble qu'ils ne fonctionnent pas.

Quelqu'un peut-il me dire comment le personnaliser?

csshtml5progress-barinput-type-range
48
ptamzz

[~ # ~] modifier [~ # ~] : de nos jours, tous les principaux navigateurs prennent en charge les deux

Par conséquent vous devez utiliser l'une de ces deux, comme expliqué dans les autres réponses , et cela ne devrait plus être la réponse acceptée.

Le <input type="range"> est assez nouveau et vous essayez déjà de le personnaliser avec CSS. :)

Je n'essaierais pas cela pour deux raisons:

  1. là il pourrait y avoir d'énormes problèmes de compatibilité maintenant et pour les prochaines (ou plusieurs) années . Pensez que de nos jours un contrôle de formulaire comme <select> (disponible depuis le démarrage du Web) est toujours problématique pour être personnalisé avec CSS de manière croisée. Par exemple, si vous définissez un padding pour les cases de sélection, de nombreux navigateurs (IE7, OPERA9, CHROME5, SAFARI4) ignoreront totalement le remplissage. Il fonctionne uniquement sur IE8 et sur FF 3.6. (tous les tests effectués avec HTML5 DOCTYPE donc en mode standard).

  2. Le <input type="range"> a été créé pour montrer un curseur PAS une barre de progression , en essayant de le tromper avec CSS afin de transformer un curseur en barre de progression qu'il sonne bizarre. Comme essayer d'utiliser CSS pour changer un <textarea> dans un tableau, mais pourquoi ne pas simplement utiliser un <table> pour rendre les tableaux?!

Pour afficher une barre de progression en HTML5, vous devez suivre la suggestion donnée par marcgg dans sa réponse. Comme aucun navigateur ne le rend actuellement, vous pouvez utiliser un simple div avec un p à l'intérieur comme ceci:

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

Mettez ensuite simplement à jour le style.width de l'élément interne P en pourcentage comme:

width: 75%

FYI: si vous voulez le faire en JS simple, voici le code:

document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';
13
Marco Demaio
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;
}
65
Eyal

Si vous utilisez HTML 5, pourquoi ne pas utiliser la balise progress?

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

J'ai fait une solution multi-navigateur (+ IE9, FF, Chrome, Safari), uniquement CSS.

[Mis à jour le 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;
  }
}
13
nlfonseca

Vous pouvez dans Webkit, via le -webkit-slider-thumb pseudo-élément: 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" />

Bien que les autres aient raison sur l'entrée type="range" n'est pas le bon élément pour le travail.

Vous devez utiliser le <progress> élément et pour les navigateurs qui ne le prennent pas en charge, ce polyfill: http://lea.verou.me/polyfills/progress/

11
Lea Verou

Vous pouvez modifier le CSS de l'entrée de plage en utilisant input[type="range"]::-webkit-slider-thumb et input[type="range"].

En voici l'exemple,

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

Je sais que c'est déjà répondu, mais je le partage.

6
Niraj Chauhan

jQuery Tools fournit un plug-in qui crée des éléments stylables à partir d'une entrée de plage, et de plus, il fonctionne toujours comme un curseur dans les navigateurs plus anciens qui ne prennent pas en charge input[type=range].

Vous permet de styliser:

  • la poignée
  • le curseur
  • remplissage facultatif
  • champ de sortie de valeur

Je l'ai utilisé plusieurs fois et c'est un excellent outil.

AVERTISSEMENT: ne fonctionne pas sur les appareils tactiles. Je n'ai pas autant d'expérience avec cela, mais vous pouvez essayer le curseur mobile jQuery: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

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

3
inorganik

Ceci est un exemple:

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">
2
edCoder

Quand j'ai regardé cette question, j'avais besoin de quelque chose de simple. Il existe déjà un certain nombre de réponses de framework sur la façon de procéder, mais parfois il est plus léger et flexible juste pour créer le vôtre. Bien sûr, vous obtenez un certain montant gratuitement avec un cadre (et c'est souvent le bon choix s'il est bon), mais vous devez alors vous soucier de la compatibilité du cadre, du support et de creuser dans les profondeurs du cadre pour aller en dehors de ses frontières.

Voici un simple curseur javascript uniquement. Fondamentalement, c'est une img pour le curseur, une img pour le bouton et un rappel avec un pourcentage de progression. Pas un slider tout chantant et dansant, mais quelque chose de simple à construire.

La démo

Le 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>

Le script

Placer dans un fichier 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 || {}));

Exemple d'utilisation

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);
}
2
acarlon

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

C'est un outil qui produit du code multi-navigateur pour styliser les entrées de plage natives et webshims comme vous le souhaitez.

.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;
}
1
Oriol