css--input的type为range的样式修改

最新推荐文章于 2024-02-26 14:24:37 发布

VIP文章珊珊333333

最新推荐文章于 2024-02-26 14:24:37 发布

阅读量2.2k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/css33/article/details/89454263

版权

效果：

代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <!-- appearance 允许您使元素看上去像标准的用户界面元素 -->
  <!-- -webkit-slider-thumb 这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效 -->
  <!--  -webkit-slider-thumb需要配和::-webkit-slider-runnable-track使用,否则会没有效果 -->
<style>
  .slider1 {
    -webkit-appearance: none;
    max-width: 350px;
    width: 100%;
    height: 10px;
    outline: none;
  }
  .slider1::-webkit-slider-thumb{
      -webkit-appearance: none;/*清除默认样式*/
      height:25px;/*设置滑块高度*/
      width:25px;/*设置滑块宽度*/
      background: #fff;/*设置背景色*/
      border-radius:50%;/*加个圆角边*/
      /* margin-top:-1vw; 使用position的话会导致滑块不滑动,但是绑定的value是改变的

最低0.47元/天解锁文章

优惠劵

珊珊333333

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css--input的type为range的样式修改

效果：代码：<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title>  ...
复制链接

扫一扫