html5滚动条选择,HTML5 烟灰色的范围选择滑动条
CSS
语言：
CSSSCSS
确定
html {
background: #e6e6e6;
}
input[type='range'] {
box-sizing: border-box;
position: absolute;
top: 33%;
left: 50%;
padding: 0 0.25em;
width: 16em;
height: 1.5em;
border-radius: 0.75em;
/* set a background, white by default in Blink */
transform: translate(-50%, -50%);
/* make font-size consistent across browsers */
background: linear-gradient(#ccc, #fff) border-box;
font-size: 1em;
/* slider components */
/* slider variations */
/* slider states */
cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
/*
* set a border,
* solid 1px black by default in IE,
* no border in othr browsers
*/
box-sizing: border-box;
border: solid 1px #818181;
height: 0.875em;
border-radius: 0.4375em;
background: linear-gradient(#b0b0b0, #d5d5d5);
}
input[type='range']::-moz-range-track {
/*
* set a border,
* solid 1px black by default in IE,
* no border in othr browsers
*/
box-sizing: border-box;
border: solid 1px #818181;
height: 0.875em;
border-radius: 0.4375em;
background: linear-gradient(#b0b0b0, #d5d5d5);
}
input[type='range']::-ms-track {
/*
* set a border,
* solid 1px black by default in IE,
* no border in othr browsers
*/
box-sizing: border-box;
border: solid 1px #818181;
height: 0.875em;
border-radius: 0.4375em;
/* remove tick marks on track */
background: linear-gradient(#b0b0b0, #d5d5d5);
color: transparent;
}
input[type='range']::-webkit-slider-thumb {
margin-top: -0.0625em;
/*
* set a border,
* defaults different in every browser
*/
box-sizing: border-box;
border: solid 1px #818181;
width: 1.5em;
/*
* set a border-radius,
* rounded by default only in Firefox
*/
height: 1em;
border-radius: 0.25em;
/*
* set a background,
* defaults different in every browser
*/
box-shadow: inset 0 0.125em 0.125em #fcfcfc;
/* won't work in IE, kinda messsed in Chrome */
background: linear-gradient(#e0e0e0, #cecece);
cursor: ew-resize;
}
input[type='range']::-moz-range-thumb {
/*
* set a border,
* defaults different in every browser
*/
box-sizing: border-box;
border: solid 1px #818181;
width: 1.5em;
/*
* set a border-radius,
* rounded by default only in Firefox
*/
height: 1em;
border-radius: 0.25em;
/*
* set a background,
* defaults different in every browser
*/
box-shadow: inset 0 0.125em 0.125em #fcfcfc;
/* won't work in IE, kinda messsed in Chrome */
background: linear-gradient(#e0e0e0, #cecece);
cursor: ew-resize;
}
input[type='range']::-ms-thumb {
/*
* set a border,
* defaults different in every browser
*/
box-sizing: border-box;
border: solid 1px #818181;
width: 1.5em;
/*
* set a border-radius,
* rounded by default only in Firefox
*/
height: 1em;
border-radius: 0.25em;
/*
* set a background,
* defaults different in every browser
*/
box-shadow: inset 0 0.125em 0.125em #fcfcfc;
/* won't work in IE, kinda messsed in Chrome */
background: linear-gradient(#e0e0e0, #cecece);
cursor: ew-resize;
}
input[type='range']::-ms-fill-lower,
input[type='range']::-ms-fill-upper,
input[type='range']::-ms-tooltip {
display: none;
}
input[type='range']:nth-of-type(2) {
top: 66%;
}
.js input[type='range']:nth-of-type(2)::-webkit-slider-runnable-track {
background: linear-gradient(#fafafa, #bbb) no-repeat, linear-gradient(#b0b0b0, #d5d5d5);
background-size: 40% 100%, 100% 100%;
}
.js input[type='range']:nth-of-type(2)::-moz-range-track {
background: linear-gradient(#fafafa, #bbb) no-repeat, linear-gradient(#b0b0b0, #d5d5d5);
background-size: 40% 100%, 100% 100%;
}
.js input[type='range']:nth-of-type(2)::-ms-fill-lower {
display: block;
border-radius: 0.875em;
background: linear-gradient(#fafafa, #bbb);
}
input[type='range']:nth-of-type(2)::-webkit-slider-thumb {
margin-top: -0.1875em;
height: 1.25em;
background: repeating-linear-gradient(90deg, #bbb, #bbb 1px, rgba(187, 187, 187, 0) 2px, rgba(187, 187, 187, 0) 4px) no-repeat 50% 50%, linear-gradient(#ededed, #c9c9c9);
background-size: 65% 65%, 100% 100%;
}
input[type='range']:nth-of-type(2)::-moz-range-thumb {
height: 1.25em;
background: repeating-linear-gradient(90deg, #bbb, #bbb 1px, rgba(187, 187, 187, 0) 2px, rgba(187, 187, 187, 0) 4px) no-repeat 50% 50%, linear-gradient(#ededed, #c9c9c9);
background-size: 65% 65%, 100% 100%;
}
input[type='range']:nth-of-type(2)::-ms-thumb {
height: 1.25em;
background: repeating-linear-gradient(90deg, #bbb, #bbb 1px, rgba(187, 187, 187, 0) 2px, rgba(187, 187, 187, 0) 4px) no-repeat 50% 50%, linear-gradient(#ededed, #c9c9c9);
background-size: 65% 65%, 100% 100%;
}
html5滚动条选择,HTML5 烟灰色的范围选择滑动条相关推荐
- PyQt使用中遇到的若干问题（1）（版本选择，安装，显示图片，滑动条，窗口一闪而过）
最近几天在需要做个人脸检索的demo,开始在考虑使用C或者Python,但是由于我之前的实验使用的是基于Python的Keras框架,所以选择使用Python来做GUI,Python的GUI工具很多, ...
- html5 canvas代替flash,替代Flash技术最好的选择------HTML5
关键词:视频处理.音频处理.Canvas(画布) 一.视频处理 1.基本内容 1.1.使用HTML实现视频处理: video标签 如果当前浏览器不支持video,可以在veido里面编写提示内 src ...
- ps4看b站 f怎么调html5,b站html5,b站怎么切换到HTML5版播放器？
b站怎么切换到HTML5版播放器? 目前来说B站只能使用HTML5播放器,因为FIASH已经停止维护,所以现在不需要设置,只能使用HTML5播放器 b站怎么做切换到html5视频播放器 1. 在网页上 ...
- 跟KingDZ学HTML5之九 HTML5新的 Input 种类
好了,我们这节课讲解的可能有些难以测试,因为目前很多浏览器都不支持,这些新增加的标签,我也只能,尽可能的去找支持的浏览器给大家测试展示效果. HTML5中新增加了很多 Input 的种类. 1.&l ...
- HTML5的未来 - HTML5 还能走多远？
日期:2013-1-18 来源:GBin1.com 还记得现在就开始使用HTML5的十大原因吗?HTML5目前仍旧是讨论的焦点,在今天的这篇文章中,我们将讨论HTML5可能的未来. HTML5 的问 ...
- 简单的html5,简单的HTML5初步入门教程
HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. HTML5 是下一代的 HTM ...
- 【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录 页面展示 技术要点 代码实现 html代码 CSS代码 用到的图片 页面展示 本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
- input html5 新特性,html5 input 新特性
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 介绍这些新的输入类型: email url number range Date pickers (date, month, ...
- html5大全,常用html5标签大全 - 小俊学习网
作为一名网页制作人员或者seo优化人员,不可不知的html5标签.万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,html5标准规范制 ...
最新文章
- MathType公式行距设置的方法
- 12款很棒的浏览器兼容性测试工具
- POJ 2010 Moo University - Financial Aid（堆维护滑窗kth，二分）
- 快看漫画大数据平台的模型思维与用户增长实践
- dll可以在linux下使用吗_无需虚拟技术，6步直接在Windows下使用Linux
- Python四大金刚之三：元组
- Python之线程(二)
- 在线预览文档简单例子
- 开发工具 之 PowerDesigner
- python---Matplotlib简单用法
- 论福禄克DTX-1800如何测试CAT7网线？
- 联想台式机进入修复计算机,联想台式机一键恢复的使用方法
- 二元函数偏导数公式_二阶偏导数公式详解
- 影视之我看——写自己的剧本
- sqlite C接口增删改查，数据库优化
- 越来越快的jsRuntime——Bun
- 经典算法之左边界二分查找法(俗称左边界二分搜索法)
- 单片机实例3——多路开关状态指示（硬件电路图+汇编程序+C语言程序）
- 里氏代换原则C#详解
- 导数与微分总复习——“高等数学”