web-dev-qa-db-ja.com

CSSを使用してHTML5入力範囲タイプの外観をカスタマイズする方法は？

HTML5の範囲入力タイプの外観をカスタマイズして、プログレスバーのように見せたい。 CSSクラスを使用していくつかの一般的なCSS属性を適用しようとしましたが、機能していないようです。

誰でもそれをカスタマイズする方法を指示できますか？

csshtml5progress-barinput-type-range
48
ptamzz

[〜＃〜] edit [〜＃〜]：現在、すべての主要なブラウザは両方をサポートしています

したがって、他の回答で説明されているように、これら2つのいずれかを使用する必要がありますであり、これはもはや受け入れられた回答ではありません。

<input type="range">はかなり新しく、すでにCSSでカスタマイズしようとしています。 :)

私は2つの理由でそれを試みません：

  1. 現在および今後数年間（または数年間）互換性の問題が発生する可能性があります。最近では、<select>（Webが開始されてから利用可能）のようなフォームコントロールは、クロスブラウザーの方法でCSSを使用してカスタマイズするには依然として問題があると考えています。たとえば、選択ボックスにpaddingを設定すると、多くのブラウザー（IE7、OPERA9、CHROME5、SAFARI4）はパディングを完全に無視します。 IE8およびFF 3.6でのみ機能します。 （すべてのテストはHTML5 DOCTYPEで行われたため、標準モードで行われます）。

  2. <input type="range">はプログレスバーではなくスライダーを表示に作成され、スライダーをプログレスバーに変換するためにCSSでチートを試み、奇妙に聞こえます。 CSSを使用して<textarea>をテーブルに変更しようとしていますが、なぜ<table>を使用してテーブルをレンダリングしないのですか？！

HTML5でプログレスバーを表示するには、marcggの回答で示された提案に従う必要があります。現在レンダリングしているブラウザはないため、次のようなpを含む単純なdivを使用できます。

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

次に、内部P要素のstyle.widthを次のようにパーセントで更新します。

width: 75%

参考までに、単純なJSでそれを行いたい場合は、次のコードを使用します。

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

HTML 5を使用している場合、progressタグを使用しないのはなぜですか？

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

クロスブラウザーソリューション（+ IE9、FF、Chrome、Safari）、CSSのみを実行しました。

[2016年11月24日更新]

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

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

他の人は、入力に対して正しいtype="range"は、ジョブに適切な要素ではありません。

<progress>要素を使用する必要があり、それをサポートしていないブラウザの場合は、このポリフィル： http://lea.verou.me/polyfills/progress/

11
Lea Verou

input[type="range"]::-webkit-slider-thumbおよびinput[type="range"]を使用して、範囲入力のCSSを編集できます。

以下に例を示します。

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

これは既に回答済みですが、共有するだけです。

6
Niraj Chauhan

jQuery Toolsは、範囲入力からスタイリング可能な要素を作成するプラグインを提供します。さらに、input[type=range]をサポートしない古いブラウザーでスライダーとして機能します。

スタイルを設定できます：

  • ハンドル
  • スライダー
  • オプションの進捗フィル
  • 値出力フィールド

私は何度も使ってきましたが、素晴らしいツールです。

警告：タッチデバイスでは機能しません。私はあまり経験がありませんが、jQueryモバイルスライダーを試すことができます： http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

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

3
inorganik

これは一例です：

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

この質問を見て、簡単なものが必要でした。これを行う方法については、すでに多くのフレームワークの回答がありますが、独自のものを作成するだけで、より軽量で柔軟な場合もあります。もちろん、フレームワークで一定の量を無料で手に入れることができます（適切な場合はしばしば正しい選択です）が、フレームワークの互換性、サポート、およびフレームワークの深さを掘り下げることを心配する必要がありますその境界外。

これは、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>

スクリプト

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

http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range を参照してください

クロスブラウザーコードを生成して、ネイティブおよびwebshimsの両方の範囲入力を必要に応じてスタイル設定するツールです。

.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