当前位置：首页 > CSS

css制作拉杆

2026-02-12 21:11:00CSS

CSS 制作拉杆（滑块控件）

使用CSS可以创建自定义样式的滑块（拉杆），主要通过input[type="range"]元素实现，结合伪元素和属性选择器调整外观。

基础滑块结构

HTML部分只需一个input元素：

<input type="range" min="0" max="100" value="50" class="custom-slider">

通用样式重置

清除浏览器默认样式，确保跨浏览器一致性：

.custom-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  outline: none;
}

滑块轨道样式

自定义轨道（滑槽）背景和形状：

.custom-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(to right, #4CAF50, #2196F3);
  border-radius: 4px;
}

.custom-slider::-moz-range-track {
  height: 8px;
  background: linear-gradient(to right, #4CAF50, #2196F3);
  border-radius: 4px;
}

滑块拇指样式

调整拖动按钮的外观：

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #2196F3;
  margin-top: -6px;
  cursor: pointer;
}

.custom-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #2196F3;
  cursor: pointer;
}

交互效果增强

添加悬停和焦点状态反馈：

.custom-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2);
  transition: transform 0.2s;
}

.custom-slider:focus {
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

垂直滑块变体

通过transform实现垂直方向滑块：

css制作拉杆

.vertical-slider {
  -webkit-appearance: slider-vertical;
  width: 8px;
  height: 200px;
}

/* 其他浏览器兼容 */
.vertical-slider::-webkit-slider-runnable-track {
  width: 8px;
}