input range 怎么调整css

input range 是一个HTML元素，可以用CSS来调整它的样式。以下是一些常用的CSS属性来自定义 input range 的外观：

1. width 和 height 属性可以设置 input range 的宽度和高度。

2. background-color 属性可以设置 input range 的背景颜色。

3. border-radius 属性可以设置 input range 的圆角。

4. outline 属性可以设置 input range 获得焦点时的外边框。

5. ::-webkit-slider-thumb 和 ::-moz-range-thumb 伪类可以分别用于调整 Webkit 和 Mozilla 浏览器中 input range 拖动按钮的样式。可以设置这些伪类的 background-color、border-radius 和 box-shadow 等属性。

以下是一个示例代码，演示了如何使用 CSS 自定义 input range 的样式：

<input type="range" min="0" max="100" step="1" value="50" id="myRange">

<style>
#myRange {
  width: 100%;
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  outline: none;
}

#myRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #4CAF50;
  cursor: pointer;
}

#myRange::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #4CAF50;
  cursor: pointer;
}
</style>

这个示例代码会创建一个 input range 元素，并使用 CSS 设置其样式，包括设置了背景颜色、圆角、拖动按钮的样式等。你可以修改这些属性，来自定义 input range 的外观。