css3 滑动条 刻度条

CSS是网页设计中不可或缺的一部分，而CSS3作为新一代的CSS标准，带来了许多新的特性。其中最常用的就是CSS3滑动条和刻度条。

/* 滑动条样式 */input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    background: #f0f0f0;
    outline: none;
    /*设置滑块轨道*/&
::-webkit-slider-runnable-track {
    height: 5px;
    background: #4CAF50;
    border-radius: 10px;
}
    /*设置滑块*/&
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    border-radius: 50%;
    cursor: pointer;
}
}
/* 刻度条样式 */.container {
    position: relative;
}
input[type="range"].slider {
    -webkit-appearance: none;
    background-color: transparent;
    margin: 0;
    width: 100%;
    cursor: pointer;
    height: 10px;
    position: relative;
    z-index: 1;
}
/* 设置滑动条轨道的样式 */input[type="range"].slider + .scale-bar {
    background-color: #ccc;
    height: 2px;
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    z-index: -1;
}
/* 设置分段刻度样式 */input[type="range"].slider + .scale-bar li {
    display: inline-block;
    list-style: none;
    position: absolute;
    top: 10%;
    margin-left: -1px;
}
input[type="range"].slider + .scale-bar li::after {
    content: ';
    display: block;
    border-top: 4px solid #666;
    width: 2px;
    height: 10px;
    margin-top: -4px;
}
input[type="range"].slider::-webkit-slider-runnable-track {
    background: transparent;
}
input[type="range"].slider::-moz-range-track {
    background: transparent;
}
    

以上代码实现了3种不同的滑动条样式，包括普通滑动条、带有分段刻度的滑动条和自定义滑动条。可以根据不同需求选择使用。

其中普通滑动条和自定义滑动条使用了input[type="range"]选择器，设置了滑块的样式、轨道的样式和基本属性，同时使用了伪类选择器来定义轨道和滑块的样式。

带有分段刻度的滑动条则额外使用了ul和li标签来实现刻度的分段显示，通过设置分段后的li标签的样式来控制刻度的长度和颜色。

以上就是CSS3滑动条和刻度条的相关代码和使用方法，希望对网页设计和开发有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！