中文译文:http://www.evget.com/article/2014/11/10/21804.html
英文原文:http://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
注意:本文代码全部为CSS,开始没看到css选项,就随便选了一个,等写完后才发现可以自行填写,影响不大,懒了下,就没改了~~~原谅偶
---------正文开始--------
自从IE10发布,输入范围样式备受关注。 现在仅仅使用CSS就可以生成跨浏览器、可兼容的输入范围(滑块)。今天,我们就一起来简单实践下。
把上图变成这样:
为了简化生成样式的过程,为添加了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. */ } 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; background: transparent; /* Hides the slider so custom styles can be added */ border-color: transparent; color: transpare
这个CSS在所有浏览器中,给我们不可见或者无样式的输入范围。现在我们可以使用定制样 式。
翻阅样式
接下来是我们对组件延路径点击、拖拽的样式设计,一个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; }
我们在这里重复代码,如果你不能用多好分隔这些类型的选择符,那这步就必不可少。如果不向浏览器说清楚,他们坑能不会执行。 然后,我们得到下图
路径样式
翻阅的路径,可以使用普通的HTML元素。 IE浏览器注意:IE 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; }
然后得到下图:
构建一个完整的输入范围 之前,我们创建了滑块和路径,现在我们可以写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; animate: 0.2s; 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; animate: 0.2s; 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; animate: 0.2s; 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; }
输入范围完成:
附加风格设计
因为要兼容所有浏览器,CSS会比较大。使用预处理程序可以是其工作更加有效率。下面的LESS文件可以生成上面提到的CSS。
@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; animate: 0.2s; } .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); } }
浏览器支持
自身支持范围输入的浏览器有: Firefox 23+, Safari 4+, iOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+。如果你遵循本文中的代码,自定义样式应该很大程度上是匹配的。
示例:
相关推荐
CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题
主要解释css样式在浏览器中的兼容问题
本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题。分享给大家供大家参考。具体总结如下: 一、CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float...
解决不通浏览器样式(CSS)兼容问题,符合W3C标准。
本文档介绍了常见的浏览器兼容问题,包括css样式在各个浏览器上如何处理
一、前言 我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”,本文虽然题目类似,但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,...
属性、浏览器兼容与网页布局内容简介:《别具光芒CSS属性、浏览器兼容与网页布局》结合大量范例与实际应用的实例,详细介绍了W3C发布的层叠样式表CSS2.1规范,浏览器对于CSS2.1规范解释的异同,以及使用XHTML和层叠...
由于每个人喜欢是浏览器不同,而不同浏览器页面页面样式兼容也不同导致开发人员很郁闷
最全的CSS浏览器兼容问题,css 样式 浏览器兼容 html
什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,在这种浏览器下显示正常,在另一种下就乱了,我们在编写CSS的时候会很恼火,刚修复了这个...
本文档介绍了常见的浏览器兼容问题 主要包括css样式
兼容所有浏览器的CSS写真,分数有点高。但是确实有用。以后再也不用为浏览器兼容性头痛了
1.结合fullpage.js实现全屏滚动 2.CSS中linear-gradient() 函数用于创建一个线性渐变的 “图像”。 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 值 描述 ...
跨浏览器兼容性是网页制作永恒的难题。别看各浏览器厂商都努力在自己的浏览器中实现新式的css3标准特性,但都是以扩展样式的形式提供的, 所以在未来一段时间里,样式表里的-moz-,-webkit-,(-ms-,-o-)等等前缀将...
pdf文件,介绍了CSS hack问题,用于兼容多种浏览器的样式问题,欢迎下载。
css样式调整方案 前台构架师必读 css兼容各种浏览器
web开发因为不同浏览器内核不同,页面呈现效果不同,所以自己总结了一些针对浏览器默认样式解决的样式方法和内核描述。
function getBrowser() { var i = window.navigator.userAgent; var isChrome = i.indexOf("Chrome") && window.chrome; var issafari=i.indexOf("safari") && window....js判断不同浏览器内核调用不同css样式
兼容所有浏览器的CSS3圆角,非常使用于网页设计圆角设计。