html5 svg defs,HTML5 SVG 粘稠形态的滑动条

最新推荐文章于 2025-05-25 08:50:17 发布

亮叔叔

最新推荐文章于 2025-05-25 08:50:17 发布

阅读量159

点赞数

文章标签： html5 svg defs

本文详细介绍了如何使用CSS对HTML中的滑块控件进行样式定制，包括轨道、填充条及滑块按钮等元素的设计，提供了丰富的样式选项以适应不同的设计需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

body {

height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

background: #225378;

overflow: hidden;

}

.wrapper {

margin: auto;

}

.slider,

.slidervertical {

position: absolute;

left: 0px;

top: 0px;

overflow: visible;

z-index: 100;

/* slidershell exists only

to provide a positioning context for the range input and other elements.*/

}

.label {

vertical-align: middle;

display: inline-block;

color: white;

text-transform: uppercase;

font-family: "Montserrat";

letter-spacing: 0.02em;

}

.label.fun {

color: #eb7f00;

}

.label.not-fun {

color: #acf0f2;

}

.slidershell {

margin: 0 20px;

vertical-align: middle;

display: inline-block;

border: 0 none;

position: relative;

left: 0px;

top: 0px;

overflow: visible;

-webkit-filter: url(#goo);

filter: url(#goo);

/* .slidertrack is the visible track on which the user drags the thumb button. */

}

.slidertrack {

border-radius: 4px;

position: absolute;

background: #61c2ca;

/* .sliderfill adds color (or a gradient as seen here) to the track as the user

drags the thumb. */

}

.sliderfill {

position: absolute;

pointer-events: none;

background: #eb7f00;

border-radius: 4px;

/* .sliderthumb can be any css you like including an image.

The dimensions must match those found in the rule for

input[type=range]::-webkit-slider-thumb. */

}

.sliderthumb {

width: 30px;

height: 30px;

display: block;

background: white;

border-radius: 50%;

background-position: 0px 0px;

position: absolute;

left: 0px;

top: 0px;

border: 0 none;

padding: 0px;

margin: 0px;

text-align: center;

pointer-events: none;

/* .slidervalue can be styled as you see fit */

}

input[type=range] {

width: 100%;

height: 100%;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

margin: 0px;

padding: 0px;

border: 0 none;

background: transparent;

color: transparent;

overflow: visible;

}

input[type=range]:focus {

outline: none;

/* Make the thumbs the same size as your custom sliderthumb.

they will not be visible but they will be draggable. */

}

input[type=range]::-webkit-slider-thumb {

width: 40px;

height: 40px;

border-radius: 0px;

border: 0 none;

background: transparent;

-webkit-appearance: none;

}

svg {

width: 0;

height: 0;

position: absolute;

left: 0;

top: 0;

}