首页 > 解决方案 > 如何在chrome中填写输入类型=范围?

问题描述

我必须在我的网络应用程序中使用输入类型 = 范围。问题是它似乎没有正确填充。

看一看:

在此处输入图像描述

这是我的代码:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-csp.min.css" integrity="sha512-nptw3cPhphu13Dy21CXMS1ceuSy2yxpKswAfZ7bAAE2Lvh8rHXhQFOjU+sSnw4B+mEoQmKFLKOj8lmXKVk3gow==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous"></script>
<input type="range" min="0" max="3" value="0" @change='${this.handleTableColumns}'>

(名为@change 的函数隐藏索引等于e.target.value 的表列)。

你有什么想法来解决这个问题吗?提前致谢!

标签: javascripthtmlcsslit-elementinput-type-range

解决方案


好吧,伙计们,我发现了这个错误:有一个 css 以一种不寻常的方式设置输入样式。我以这种方式仅更改了特定输入标签而不是范围输入标签的样式。

这是破坏范围输入的 css 规则。这也解释了为什么这里贴出的代码是有效的。谢谢大家!祝你有美好的一天

.styled-input {
          padding: 4px 20px;
          margin: 0 4px;          
          font-size: 14px;
          border-radius: 2px;
          border: 1px solid;
          outline: none;
        } 

推荐阅读