使用 CSS 样式跨浏览器兼容的范围输入

自 IE 10 发布以来，范围输入的样式设计已得到显著改进。现在可以使用纯 CSS 生成跨浏览器兼容的范围输入（滑块）。在本教程中，我们将使用一个基本的范围输入 (<input type="range">)

并将其转换为以下内容

为了简化生成跨兼容样式的过程，已包含 LESS 样式表。 CSS 也可用。

应用基本 CSS 样式

需要在所有浏览器中将几种样式应用于范围输入，以覆盖其基本外观。

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

这将在所有浏览器中生成不可见或无样式的范围输入。现在我们可以应用自定义样式。

样式化滑块

您在轨道上点击或拖动的部件称为滑块。它可以像普通 HTML 元素一样进行样式化。

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

请注意，虽然我们在这里重复代码，但这很有必要，因为您无法使用逗号分隔这些类型的选择器。如果浏览器无法理解选择器的一部分，它将丢弃整个选择器。

这将给我们以下内容

具有不可见轨道（WebKit/Blink）或无样式轨道（Firefox 和 IE）的样式化输入

样式化轨道

滑块移动的线条称为轨道。它也可以像普通 HTML 元素一样进行样式化。

关于 IE 的说明：Internet Explorer 10+ 对范围输入的处理方式略有不同。在 IE 中，您可以为轨道的上部（滑块右侧）和下部（滑块左侧）区域指定完全不同的样式。

需要注意的另一件事是，您可以将焦点效果应用于轨道，当用户与范围进行交互时，这会改变样式。

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

上面的代码将给我们

一个没有滑块的轨道（Chrome）或一个无样式的滑块（Firefox 和 IE）

构建完整的范围输入

现在我们已经构建了滑块和轨道，我们可以将 CSS 代码组合在一起并制作完整的范围输入。

所有浏览器中范围输入的完整 CSS 样式

以下是在所有浏览器中为样式化范围输入提供的完整 CSS 代码。

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

完成的范围输入

这些样式使以下输入

奖励：所有浏览器中范围输入的完整 Less 样式

为每个浏览器制作相同的范围输入需要大量的 CSS。使用预处理器，您可以获得更高效的结果。以下是用于生成上面 CSS 代码的 .less 文件。

@track-color: #424242;
@thumb-color: #555bc8;

@thumb-radius: 8px;
@thumb-height: 30px;
@thumb-width: 30px;
@thumb-shadow-size: 1px;
@thumb-shadow-blur: 1px;
@thumb-shadow-color: #111;
@thumb-border-width: 1px;
@thumb-border-color: white;

@track-width: 100%;
@track-height: 10px;
@track-shadow-size: 2px;
@track-shadow-blur: 2px;
@track-shadow-color: #222;
@track-border-width: 1px;
@track-border-color: black;

@track-radius: 5px;
@contrast: 5%;

.shadow(@shadow-size,@shadow-blur,@shadow-color) {
  box-shadow: @shadow-size @shadow-size @shadow-blur @shadow-color, 0px 0px @shadow-size lighten(@shadow-color,5%);
}

.track() {
  width: @track-width;
  height: @track-height;
  cursor: pointer;
}

.thumb() {
  .shadow(@thumb-shadow-size,@thumb-shadow-blur,@thumb-shadow-color);
  border: @thumb-border-width solid @thumb-border-color;
  height: @thumb-height;
  width: @thumb-width;
  border-radius: @thumb-radius;
  background: @thumb-color;
  cursor: pointer;
}

input[type=range] {
  -webkit-appearance: none;
  margin: @thumb-height/2 0;
  width: @track-width;

  &:focus {
    outline: none;
  }

  &::-webkit-slider-runnable-track {
    .track();
    .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
    background: @track-color;
    border-radius: @track-radius;
    border: @track-border-width solid @track-border-color;
  }
  
  &::-webkit-slider-thumb {
    .thumb();
    -webkit-appearance: none;
    margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-height / 2);
  }

  &:focus::-webkit-slider-runnable-track {
    background: lighten(@track-color, @contrast);
  }

  &::-moz-range-track {
    .track();
    .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
    background: @track-color;
    border-radius: @track-radius;
     border: @track-border-width solid @track-border-color;
  }
  &::-moz-range-thumb {
     .thumb();
  }

  &::-ms-track {
    .track(); 
    background: transparent;
    border-color: transparent;
    border-width: @thumb-width 0;
    color: transparent;
  }

  &::-ms-fill-lower {
    background: darken(@track-color, @contrast);
    border: @track-border-width solid @track-border-color;
    border-radius: @track-radius*2;
    .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
  }
  &::-ms-fill-upper {
    background: @track-color;
    border: @track-border-width solid @track-border-color;
    border-radius: @track-radius*2;
    .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
  }
  &::-ms-thumb {
    .thumb();
  }
  &:focus::-ms-fill-lower {
    background: @track-color;
  }
  &:focus::-ms-fill-upper {
    background: lighten(@track-color, @contrast);
  }
}

奖励 2：Sass 版本！

Darlan Rod 也创建了一个 Sass 版本.

浏览器支持

范围输入本身的浏览器支持大约为：Firefox 23+、Safari 4+、iOS 5+、Chrome 6+、Opera 11+、IE 10+、Android 4.2+。所以相当不错。如果您遵循本文中的代码，这些自定义样式应该与之基本匹配。

以下是来自演示的屏幕截图，展示了大量当前版本的浏览器

如果浏览器不支持范围输入，您将只获得一个文本输入，它仍然是功能性和有效的。

有用工具

由于跨浏览器范围输入样式直到 2014 年才变得可行，因此还没有多少工具可以生成现代样式。 range.css 是一个用于生成范围输入 CSS 样式的有用工具，它是我创建的。

更多示例

您绝对应该查看 Ana Tudor 的高度样式化范围输入集合.

ElijahFowler

# 2014 年 11 月 5 日

这很好。如果人们能将 select 也样式化，那就太好了。

Tom

评论的永久链接# 2014 年 11 月 5 日

您是在指 Firefox 和不可移除的下拉箭头吗？否则，它们是可以样式化的。
Kyrodes

评论的永久链接# 2014 年 11 月 5 日

我认为 @ElijahFowler 谈论的是创建一个伪元素选择器，像输入按钮一样直接样式化选择按钮。就像 select::arrow-button 一样。

目前您可以使用类似于以下内容的方式进行操作
input[type=”file”]::-webkit-file-upload-button
input[type=number]::-webkit-inner-spin-button
input[type=number]::-webkit-outer-spin-button
input[type=range]::-webkit-slider-thumb
kartofelek007

评论的永久链接# 2014 年 11 月 6 日

也许这可以帮助您
http://jsfiddle.net/keu0c29w/
这不是完整的示例，只是基本部分。

JustinF

有没有办法在保持自定义样式的同时将滑块设置为垂直方向？

Jpoisson

评论的永久链接# 2014 年 11 月 6 日

input[type=range] {
transform: rotate(90deg);
}

Umar

将范围滑块与进度条结合起来怎么样？

Jacelyn Richards

# 2014 年 11 月 6 日

作为一个设计新手，我需要像这样了解很多东西。非常感谢你告诉我这些。让我去尝试一下。

Anis

看起来这是一个很好的解决方案，可以用于自定义样式而不是默认的浏览器样式。感谢分享这些很棒的技巧。还有一件事，如何为所有浏览器设置自定义文件输入框的样式？

Roger Walsh

评论永久链接# 2014 年 11 月 6 日

自定义文件输入真的很难。这里有一个不错的教程，教你如何伪造它：http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
Gurnzbot

评论永久链接# 2014 年 11 月 6 日

是的，我发现最好的方法是隐藏它，然后显示另一个基本上控制它的元素。我使用一些基本的 JavaScript 在单击控制器时触发它。据我所知，除了使用一些 JavaScript，没有超级棒的方法可以做到这一点。

DanielGoransson

# 2014 年 11 月 18 日

我使用纯 CSS 来做，但为了显示文件名，我们需要使用 JavaScript。理论上input[type=file]::after with content: attr(value) 可以工作，但input 不应该有子元素，因此也不应该有:before/:after。

我们可以使用与自定义单选按钮/复选框相同的技术，使用标签作为操作按钮。

HTML

        Upload

CSS

    .upload-button-wrapper{
        position:relative;
    }
    //input
    .upload-button{
        position:absolute;
        left:-999em;
    }
    .upload-label{
        position:relative;
        background-color:#dadada;
        color:#000000;
        border:1px solid #000000;
        border-radius:10px;
        padding:10px;
    }
    .upload-label:hover,
    .upload-button:focus + .upload-label{
        background-color: #bababa;
    }
    .upload-label:active,
    .upload-button:active + .upload-label{
        background-color: #aaaaaa;
    }

要查看完整的示例，请查看我的 CodePen：http://codepen.io/DanielGoransson/pen/emmZGL

Roger Walsh

简洁的解决方案。我之前尝试过类似的样式，但发现如果保持操作系统控件的原样，人们会更容易使用/理解它们。Anis，文件输入几乎不可能设置样式。最好的办法是将文件输入的透明度设置为 0，然后创建自定义版本，并使用 JavaScript 捕获详细信息。这里有一个很好的示例：http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Pad

不幸的是，我们仍然有这些供应商前缀。目前，我仍然建议使用非语义元素构建的 JavaScript 滑块。

Mike

评论永久链接# 2014 年 11 月 10 日

大多数 JavaScript 解决方案不支持触摸（在 *所有* 平台上）、移动（同样在 *所有* 平台上），或者至少部分或完全不可访问。
而且，为什么要这样做呢？原生滑块在不同平台上可能看起来有点不同，但至少（应该）对所有平台都适用且功能良好。我总是建议使用内置解决方案，这样在浏览器改进时，它们也会随之改进。

prashanth

大家好，

我在 IE 浏览器中遇到了兼容性问题。我遇到的具体问题是...在我们的应用程序主页（顶级类别显示页面）的左侧有一个背景图片，我们还有 4 个内容区域（文本内容）...通常，这些内容区域就像每天的提醒一样。如果我们应用所有内容区域（文本内容），图片在 IE 和 Firefox 浏览器中看起来都很好。在这种情况下，图片大小会随着文本成比例地增加。当我们删除 2 个文本内容时，背景图片在 IE 和 Firefox 中会缺少部分图片。当我们删除页面上的所有内容时，即使是图片也只会向上移动，只有图片的一半可见。此外，图片在 IE 浏览器中缺少很多，在 Firefox 中我设置了 min-height 属性，但它在 IE 中没有反映出来...有人可以帮忙吗？快速回复将不胜感激。提前感谢。

我的代码片段...

.home_image   {background:url(../images/colors/color31/Bibendum_bras_croises.gif) right no-repeat;height: expression(this.scrollHeight &lt; 376 ? &quot;375px&quot; : &quot;auto&quot;; min-height: 375px;}

即使我尝试过删除代码并添加 min-height，它在 Firefox 中也有反映，我能够正确地看到图片，但在 IE10 和 IE8 中则不行...请帮帮我，我该如何在 IE 浏览器中应用相同的方法...谢谢。

Teelah

# 2014 年 11 月 7 日

太棒了，感谢分享这些有用的内容。在进行这些更改后，进行跨浏览器检查非常重要。幸运的是，我最近在 IE 中遇到的问题不多，这真是太好了，他们要么在更新方面做得更好，要么我的 CSS 更兼容了！

再次感谢。

Ben Lake

# 2014 年 11 月 8 日

我刚浏览了教程，IE 这次似乎很高兴。回到关于自定义输入字段的评论。有人有使用 JS 来做这件事的例子吗？ - 谢谢

Antonio Sánchez

# 2014 年 11 月 10 日

真的很棒，但有点棘手

joseph

这在 IE8 上有效吗？我的 Win7 机器仍然安装了 IE8。可能很多用户仍在使用它