当前位置: 首页 > news >正文

input type=range 进度条的自定义样式

/* 自定义进度条样式 */
.v_my input[type=range] {
  -webkit-appearance: none;/*清除系统默认样式*/
  width: 1.8rem;
  background: -webkit-linear-gradient(#ddd, #ddd) no-repeat, #ddd;/*设置左边颜色为#61bd12,右边颜色为#ddd*/
  background-size: 75% 100%;/*设置左右宽度比例*/
  height: 0.1rem;/*横条的高度*/
  border-radius: 0.1rem;
}
/*拖动块的样式*/
.v_my input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;/*清除系统默认样式*/
  height: 0.3rem;/*拖动块高度*/
  width: 0.3rem;/*拖动块宽度*/
  background: #fff;/*拖动块背景*/
  border-radius: 50%; /*外观设置为圆形*/
  border: solid 1px #ddd; /*设置边框*/
  }

 

转载于:https://www.cnblogs.com/gaidalou/p/10577127.html

相关文章:

  • c#4.8-4.11学习总结
  • 句法结构【转载】
  • L304 What Is Death?
  • 懒人用日志分析第二波-小工具goaccess
  • AI算硅基生命吗,为什么?
  • 转|例谈导数学习中的几点误区
  • Statement对象
  • Win10-MySQL-zip安装方法
  • 微信支付接入的总结 —— NATIVE MWEB JSAPI
  • (转)shell中括号的特殊用法 linux if多条件判断
  • 第五周作业
  • http转https后资源加载不显示
  • 微信内嵌浏览器打开手机浏览器下载APP(APK)的方法
  • WordPress 主题开发商将客户当肉鸡,向对手发起 DDoS 攻击
  • 重装系统踩坑之路
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • ➹使用webpack配置多页面应用(MPA)
  • co.js - 让异步代码同步化
  • linux学习笔记
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)
  • Xmanager 远程桌面 CentOS 7
  • 开源地图数据可视化库——mapnik
  • 浏览器缓存机制分析
  • 排序算法学习笔记
  • 前端技术周刊 2019-02-11 Serverless
  • 网页视频流m3u8/ts视频下载
  • 我的面试准备过程--容器(更新中)
  • 写代码的正确姿势
  • 移动端唤起键盘时取消position:fixed定位
  • 云大使推广中的常见热门问题
  • 7行Python代码的人脸识别
  • zabbix3.2监控linux磁盘IO
  • ​​​​​​​​​​​​​​汽车网络信息安全分析方法论
  • ## 临床数据 两两比较 加显著性boxplot加显著性
  • ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException
  • #13 yum、编译安装与sed命令的使用
  • %@ page import=%的用法
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (附程序)AD采集中的10种经典软件滤波程序优缺点分析
  • (接口自动化)Python3操作MySQL数据库
  • (学习日记)2024.04.04:UCOSIII第三十二节:计数信号量实验
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (原創) 是否该学PetShop将Model和BLL分开? (.NET) (N-Tier) (PetShop) (OO)
  • (转)C#调用WebService 基础
  • (转)总结使用Unity 3D优化游戏运行性能的经验
  • *Django中的Ajax 纯js的书写样式1
  • .NET Core 实现 Redis 批量查询指定格式的Key
  • .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上
  • .NET Framework杂记
  • .NET 药厂业务系统 CPU爆高分析
  • .NET/C# 如何获取当前进程的 CPU 和内存占用?如何获取全局 CPU 和内存占用?
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)
  • .NET基础篇——反射的奥妙
  • .NET简谈互操作(五:基础知识之Dynamic平台调用)
  • .NET命名规范和开发约定