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

• 花匠小妙招
• 2024-11-26 13:48

/* 自定义进度条样式 */ .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

相关知识

自定义(滑动条)input[type=“range”]样式
使input type=“file” 不可编辑
input[type=“file”] change事件第二次不触发
vue如何修剪视频
onclick触发type=file并上传文件
HTML前端基础小案例（满屋花）
HTML网页设计：十一、表单
input string was not in a correct
Photoshop 自定义形状工具绘制出色图标
点击input checkbox之后代码里面自动添加checked=“checked”

网址: input type=range 进度条的自定义样式 https://m.huajiangbk.com/newsview741848.html