利用CSS扩展输入范围增强的一个实例

本文主要介绍使用CSS扩展和增强输入范围的例子。这个例子是一个跨浏览器的轨道滑动模式，需要朋友参考。
什么是输入范围

输入范围对象是HTML5的新对象。
输入范围对象表示使用类型范围属性的HTML元素。

注意：IE浏览器9和较早的IE版本不支持使用范围属性的HTML元素。

访问输入范围对象

你可以使用getElementById（）函数来访问元素，使用type=范围属性：

var x = document.getelementbyid（MyRange）；试试
提示：您还可以通过表单的元素集合访问输入范围对象。

创建输入范围对象

你可以使用document.createelement（）方法创建元素使用type =范围属性：

var x = document.createelement（输入）；
x.setattribute（类型

在本教程中，我们使用基本范围输入作为示例：
然后把它变成：
为了简化跨浏览器兼容样式的生成过程，我们介绍较少。当然，有一个CSS版本。
添加底层CSS样式

我们需要添加几个样式到范围输入，以覆盖所有浏览器的默认外观。
CSS代码将内容复制到剪贴板。
输入{类型=范围{ }
WebKit的外观：无； / *隐藏的滑块，滑块的自定义风格。
宽度：100%。
}

输入{类型=范围}：：- WebKit滑块{
WebKit的外观：无；
}

输入{范围= }：焦点{
大纲：否；删除默认的蓝色边框
}

输入{
宽度：100%；
光标：指针；
背景：透明的；隐藏的滑块，滑块来定制样式。
边框颜色：透明；
颜色：透明；
}

我们创建了一个在所有浏览器中不可见或样式的范围输入。现在我们可以添加基本样式。
向滑块添加样式

沿着轨道单击或拖动的小组件称为滑块。它可以像常规的HTML元素一样添加到样式中。
CSS代码将内容复制到剪贴板。
设置的WebKit浏览器范围 / * * /
输入{类型=范围}：：- WebKit滑块{
WebKit的外观：无；
边境：1px solid # 000000；
身高：36px；
宽度：16px；
边界半径：3px；
背景：# ffffff；
光标：指针；
边距：- 14px； / *在Chrome中，你需要定义一个边缘，但在Firefox和IE，是自动的。
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d； / * * /添加一个很酷的特技为滑块
}

火狐浏览器
输入{类型=范围}：：-moz范围拇指{
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
边境：1px solid # 000000；
身高：36px；
宽度：16px；
边界半径：3px；
背景：# ffffff；
光标：指针；
}

ie
输入{
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
边境：1px solid # 000000；
身高：36px；
宽度：16px；
边界半径：3px；
背景：# ffffff；
光标：指针；
}

请注意，我们在这里重复了好几次代码，这是必要的，因为你不能用逗号分隔这种类型的选择器。只要浏览器不能理解选择器的一部分，选择器将作为一个整体被放弃。
我们得到了以下内容：
将样式添加到轨道

滑块移动的水平线称为轨道，它也可以像常规的HTML元素一样添加到样式中。
在IE中的一个小提示：对输入范围的添加方式是IE10 +略有不同。在伊江，你可以添加完全不同风格的块的上半部分（滑块的右侧）和下部（滑块的左）。
另一件需要注意的事情是，您应该关注跟踪，当用户与范围交互时，它会发生变化。

CSS代码将内容复制到剪贴板。
输入{类型=范围}：：- WebKit滑块运行轨道{
宽度：100%；
身高：8.4px；
光标：指针；
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
背景：# 3071a9；
边界半径：1.3px；
边境：0.2px固体# 010101；
}

输入{类型=范围}：重点：：- WebKit滑块运行轨道{
背景：# 367ebd；
}

输入{类型=范围}：：-moz范围轨道{
宽度：100%；
身高：8.4px；
光标：指针；
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
背景：# 3071a9；
边界半径：1.3px；
边境：0.2px固体# 010101；
}

输入{
宽度：100%；
身高：8.4px；
光标：指针；
背景：透明；
边框颜色：透明；
16px边框宽度：0；
颜色：透明；
}
输入{
背景：# 2a6495；
边境：0.2px固体# 010101；
边界半径：2.6px；
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
}
输入{范围= }：焦点
背景：# 3071a9；
}
输入{
背景：# 3071a9；
边境：0.2px固体# 010101；
边界半径：2.6px；
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
}
输入{范围= }：焦点
背景：# 367ebd；
}

上面的代码让我们得到：
建立一个完整的范围输入

现在滑块和轨道已经建立，我们可以用CSS完成一个完整的范围输入。
跨浏览器范围输入完整的CSS代码

跨浏览器输入完整的CSS代码如下所示。

CSS代码将内容复制到剪贴板。
输入{类型=范围{ }
WebKit的外观：无；
18px保证金：0；
宽度：100%；
}
输入{范围= }：焦点{
没有轮廓；
}
输入{类型=范围}：：- WebKit滑块运行轨道{
宽度：100%；
身高：8.4px；
光标：指针；
动画：0.2s；
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
背景：# 3071a9；
边界半径：1.3px；
边境：0.2px固体# 010101；
}
输入{类型=范围}：：- WebKit滑块{
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
边境：1px solid # 000000；
身高：36px；
宽度：16px；
边界半径：3px；
背景：# ffffff；
光标：指针；
WebKit的外观：无；
边距：- 14px；
}
输入{类型=范围}：重点：：- WebKit滑块运行轨道{
背景：# 367ebd；
}
输入{类型=范围}：：-moz范围轨道{
宽度：100%；
身高：8.4px；
光标：指针；
动画：0.2s；
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
背景：# 3071a9；
边界半径：1.3px；
边境：0.2px固体# 010101；
}
输入{类型=范围}：：-moz范围拇指{
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
边境：1px solid # 000000；
身高：36px；
宽度：16px；
边界半径：3px；
背景：# ffffff；
光标：指针；
}
输入{
宽度：100%；
身高：8.4px；
光标：指针；
动画：0.2s；
背景：透明；
边框颜色：透明；
16px边框宽度：0；
颜色：透明；
}
输入{
背景：# 2a6495；
边境：0.2px固体# 010101；
边界半径：2.6px；
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
}
输入{
背景：# 3071a9；
边境：0.2px固体# 010101；
边界半径：2.6px；
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
}
输入{
盒子的影子：1px 1px 1px # 000000 0px 0px 1px # 0d0d0d；
边境：1px solid # 000000；
身高：36px；
宽度：16px；
边界半径：3px；
背景：# ffffff；
光标：指针；
}
输入{范围= }：焦点
背景：# 3071a9；
}
输入{范围= }：焦点
背景：# 367ebd；
}

完成范围输入

添加这些样式后获得的输入框如下所示：