この CSS で成功した入力範囲とスライダー オブジェクトの外観をカスタマイズしています。
input[type="range"] {
-webkit-appearance: none !important;
background: rgba(1,1,1,0.3);
height:6px;
border: solid 1px #000;
border-bottom: solid 1px #1d1d1d;
border-radius: 6px;
width: 48px;
margin: 0;
margin-bottom: 4px;
display: block;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: -webkit-linear-gradient(top, #a2a2a2 0%,#8b8b8b 50%,#7b7b7b 100%);
height:10px;
width:10px;
box-shadow: inset 0 1px 0 #C4C4C4;
border-radius: 10px;
}
このコードは 100% 動作しますが、私がやりたいことは、スライダーの背景色 ( input[type="range"]::-webkit-slider-thumb ) を jQuery で変更できることです。
メインボックスの境界線を次のように変更できました:
$('input#volume').css('background', '#FFFFFF');
しかし、jQuery でスライダーを取得する方法がわかりません。ありがとう
(参考までに、私は Mac 上の Safari (WebKit) のみをターゲットにしているため、他のブラウザーのサポートがないため、アプリケーション用です)