有没有办法为 HTML5 的范围控件设置样式？

Posted 2023-02-18

【中文标题】有没有办法为 HTML5 的范围控件设置样式？

【英文标题】：Is there a way to style HTML5's range control?

【发布时间】：2011-02-28 02:07:03

【问题描述】：

是否可以更改滑块滑动的线条的颜色？

【参考方案1】：

原来，webkit里面有：

 input[type="range"]
   -webkit-appearance:none !important;
 

 input[type="range"]::-webkit-slider-thumb
   -webkit-appearance:none !important;  
 

然后您可以为每个选择器添加您需要的任何属性。背景、渐变等……

希望有帮助！

【讨论】：

它只是隐藏了范围控制。如何风格化它？我的意思是我们需要设置哪些属性？

只需添加如下内容：height: 20px;背景颜色：红色；

是的，有可能。检查此链接jsfiddle.net/jalbertbowdenii/7Nzgw/3

@Teknotica 您的示例在 FF 中失败

@Teknotica 抱歉，我刚刚意识到range 通常在 FF 中失败，哈。没想到。

【参考方案2】：

自定义css的完整示例（此时为webkit）：

input[type="range"]
    background: rgb(94, 30, 30);
    width: 130px;
    height: 6px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);


input[type="range"]:hover
    background: rgb(194, 139, 131);
    width: 130px;
    height: 6px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);


input[type="range"]::-webkit-slider-thumb
   -webkit-appearance:none !important;  
   width:25px;
   height:15px;
   -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border:1px solid black;

    background: #a90329;
    background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019));
    background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
    background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
    background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
    background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
 

input[type="range"]::-webkit-slider-thumb:hover
   -webkit-appearance:none !important;  
   width:25px;
   height:15px;
   -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color:rgb(56, 13, 13);
    border:1px solid black;

    background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));
    background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
    background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
    background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
    background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );
 

【讨论】：

什么是-wekkit*？您在某些地方有这种情况，我不确定这是有意还是无意。

它是基于 WebKit 引擎（CSS 供应商）的浏览器的前缀webdesign.about.com/od/css/a/css-vendor-prefixes.htm

我在上面的某些行中询问了“-wekkit”（注意双 k），而不是标准的“-webkit”。我认为这可能是一个错字。 :)

谢谢，这是一个错字，现在更正了:)

【参考方案3】：

上面的答案已经描述过了。我只是在路上定制它。 看看它可能对你有帮助。

在 CSS 上添加以下代码：

input:focus 
  outline-color: transparent;

input[type="range"] 
  -webkit-appearance:none; 
  -moz-apperance:none; 
  height: 6px; 
  background-color: #b6b6b6;
  outline-color: transparent;  

input::-webkit-slider-thumb
  -webkit-appearance:none; 
  -moz-apperance:none; 
  width:16px; 
  height:16px;
  -webkit-border-radius:10px; 
  -moz-border-radius:10px; 
  -ms-border-radius:10px; 
  -o-border-radius:10px; 
  border-radius:10px;
  background-color: #20b373;
  overflow: visible;

Live Demo