H5新特性 滑动选择器 input[type=“range”]

input的type=“range”

<input type="range">
<style>
// 默认样式
input[type="range" i] {
    appearance: auto; // 允许元素看上去像标准的用户界面元素
    cursor: default; //鼠标样式
    color: -internal-light-dark(rgb(16, 16, 16), rgb(255, 255, 255));
    padding: initial;
    border: initial;
    margin: 2px;
}
</style>

属性或方法名	说明
max属性	规定允许的最大值
min属性	规定允许的最小值
step属性	滑块移动的数字间隔
value属性	规定滑块的取值
defaultValue属性	设置默认值
onchange方法	当滑块滑动时触发

自定义滑动选择框

• 去掉系统默认样式
• 设置滑轨的样式
• 设置滑块(thumb)的样式

// 需要重置浏览器的默认样式
  #slider {
    cursor: pointer;
    outline: none; //原始的控件获取到焦点时，会显示包裹整个控件的边框，所以需要取消。
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 宽高需要设置;
    width: 宽高需要设置;
    margin: 0;
    background: 可以使用颜色或背景图图片;
  }
// 设置滑块的样式
input[type='range']::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width:宽高需要设置;
  height: 宽高需要设置;
  background: 可以使用颜色或背景图;
}

另外一种常见的方案是：将滑动条隐藏(设置opacity: 0)，通过自定义div实现

background属性

background简写属性在一个声明中可设置所有的背景属性。

• background-image：设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景
• background-position：设置背景图像的位置
  默认值: 0% 0%, 效果等同于 left top。第一个值作用在横坐标，第二个值作用在纵坐标。
• background-size：设置背景图像的大小
  • auto默认值，图像真实大小。如果设置一个值, 则该值用于定义图像的宽度, 图像的高度为默认值 auto, 根据宽度进行等比例缩放; 如果设置两个值, 则分别作用于图像的宽和高。
  • cover 将背景图像等比缩放到完全覆盖容器, 背景图像有可能超出容器。(即当较短的边等于容器的边时, 停止缩放)
  • contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。(即当较长的边等于容器的边时, 停止缩放)
• background-repeat：指定背景图像的铺排方式
• background-attachment：指定背景图像是滚动还是固定
• background-origin：设置背景图像显示的原点[background-position相对定位的原点]
  默认值 padding-box , 另外还有两个值: border-box 和 content-box。
• background-clip：设置背景图像向外剪裁的区域
• background-color：指定背景颜色

注意
1.background-position 和 background-size 属性，之间需使用/分隔，且position值在前，size值在后。
2.如果同时使用 background-origin 和 background-clip 属性， origin属性值需在clip属性值之前。如果origin与clip属性值相同，则可只设置一个值。