input[type="range"]是html5中的input标签新属性，样子如下：_input type=range 滑块前面涂满颜色-优快云博客

本文介绍如何使用CSS自定义HTML5中的range输入类型的样式，包括阴影效果、背景颜色、边框圆角等，同时展示了如何改变滑块的外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input[type="range"]是html5中的input标签新属性，样子如下：

<input type="range" value="40" />

如果想让此滑块效果如下图所示，怎么做呢？

以下是样式部分：

<style type="text/css">

            input[type="range"] {

                -webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;

                margin-top: 2px;

                background-color: #272728;

                border-radius: 15px;

                width: 400px;

                -webkit-appearance: none;

                height:10px;

            }

            input[type="range"]::-webkit-slider-thumb {

                -webkit-appearance: none;

                cursor: default;

                top: -5px;

                height: 30px;

                width: 20px;

                transform: translateY(-4px);

                background: none repeat scroll 0 0 #777;

                border-radius: 15px;

                -webkit-box-shadow: 0 -1px 1px black inset;

            }

        </style>