Question

我创建了一个样式滚动条，但由于我创建了一个表单，因此无法在Chrome上运行。我试图了解原因。

出于这个问题的目的，我将文件简化为： Css文件（styles.css）：

::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(38, 81, 121, 0.4);
}

::-webkit-scrollbar-thumb {
  height: 5px;
  background-color: #265179;
}

HTML文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>            
        <form>
            <input type="text" name="example_1" />
            <input type="text" name="example_2" />
            <input type="text" name="example_3" />
            <input type="text" name="example_4" />
            <input type="text" name="example_5" />
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </form>
    </body>
</html>

如果您在Chrome上测试此内容，则滚动条将是默认滚动条，而不是自定义样式滚动条。

如果您删除3或4个输入或表单标签，则样式滚动将再次运行!!!

有人可以解释我为什么吗？ THKS

Chrome文件和表单标记的Chrome问题

0 个答案: