【问题标题】:Change the color of the jquery mobile slider spin button更改 jquery 移动滑块旋转按钮的颜色
【发布时间】:2012-12-01 14:53:18
【问题描述】:

我正在使用 jquery 移动滑块按钮

<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" step="5" />

滑块会自动生成文本输入,并且在 Chrome 中,它还会在文本输入中放置一个旋转按钮。有人知道如何更改此旋转按钮的颜色吗?

【问题讨论】:

  • 嗨,你能为此创建一个JSFiddle吗..?
  • 我怀疑 JSFiddle 会更好地展示我在寻找什么。然而,这里有一个链接到这个旋转按钮当前外观的图像,我想改变它们的颜色。 infobrink.com/wp-customImages/spin-button.png
  • 只是为了确认一下,您能否发布实际的工作代码。但我确信你看到的只是一个滚动条。 stackoverflow.com/questions/9989615/…
  • 这是我正在查看的link。请注意在 Chrome 中输入框如何添加箭头/旋转框 - 这就是我要更改颜色的原因
  • 好吧,当文本框的值通过用户输入发生变化时,会有一个事件处理程序。所以如果我在文本框中写 58,滚动条会相应地跳转到 58。所以你需要做的就是创建两个旋转按钮,用于更改文本框中的值。现有的事件处理程序将负责其余的工作.. :)

标签: css jquery-mobile input slider


【解决方案1】:

您可以使用不同的themes 或使用theme roller

here复制: 如果您只想摆脱向上/向下箭头,可以将输入包装在具有指定宽度/高度和overflow : hidden的元素中:

$(".ui-slider-input").wrap($('<div />').css({
    position : 'relative',
    display  : 'inline-block',
    height   : '36px',
    width    : '45px',
    overflow : 'hidden'
}));

【讨论】:

  • 从我尝试过的主题中只会改变输入背景颜色。 jquerymobile.com/demos/1.2.0/docs/forms/forms-themes.html 显示不同的主题,但滑块文本输入框上的旋转按钮始终为浅灰色。您必须使用 Chrome 来查看我所指的内容,因为旋转按钮不是在 Firefox 或 IE 中生成的。
  • 好的,你说的是上键和下键按钮来操作仅在 Chrome 中可见的滑块值...我必须考虑一下...
  • 是的,我不知道该怎么称呼他们,这也使得尝试寻求帮助变得困难
  • 感谢 Taifin 的所有回复,我不一定只想隐藏箭头按钮,而是将它们着色以匹配我的主题的其余部分。虽然隐藏它们,但我想这将是我的计划 B
【解决方案2】:

你不能改变滚动条/旋转按钮的颜色,除非它们是 HTML 元素。 IE 是一个例外,它允许这样做,但它又不是网络标准,在其他任何地方都不受支持。作为一种解决方法,您可以隐藏浏览器创建的旋转按钮,并将其替换为您自己的自定义旋转按钮,该按钮由 DIV 标记组成,并带有适当的事件处理程序。

【讨论】:

  • 我担心这需要一些工作。您关于隐藏它然后创建我自己的自定义旋转框的建议听起来可能会奏效。
  • 是的,这将是理想的,因为它可以跨浏览器兼容并为所有用户提供标准的外观。我做了一些搜索,结果发现 JQuery mobile 只会在 webkit 浏览器(Chrome/Safari)中添加 以使其成为旋转按钮。再次,这在所有地方都不受支持(例如在 Gecko Mozilla 等浏览器).. 这是disable the spin button 的示例
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-08
  • 2020-10-03
  • 2011-05-22
  • 2012-04-02
  • 1970-01-01
相关资源
最近更新 更多