在输入字段上永久显示向上/向下点击器答案

【问题标题】：Permenantly display the up/down clicker on an input field在输入字段上永久显示向上/向下点击器
【发布时间】：2017-06-15 12:14:18
【问题描述】：

<span id = "referralValue">
  <input type="number" name="value" value="0.00">
</span>

大家好，

我目前有以下代码。当您将鼠标悬停在输入框上时，框右侧有 2 个图标，您可以上下切换以增加/减少值。我不确定如何显示通过 CSS 永久增加/减少值的向上和向下按钮。

任何想法。

【问题讨论】：

运行代码时，两个按钮始终存在；我可以永久看到它们。我正在使用火狐
是浏览器设置它们的样式。每个浏览器都以不同的方式呈现它，您无法设置它们的样式。就像 required 属性一样；每个浏览器在将所需输入留空时为工具提示定义一种样式
这取决于浏览器，不幸的是，很难或不可能以一致的方式设置样式（就像其他几个输入控件一样）。您最好尝试使用 3rd-party 插件来实现这一点，例如jQuery UI 微调器：jqueryui.com/spinner

标签： html css

【解决方案1】：

您可以使用以下 CSS（在 Chrome 中）实现此目的：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
      opacity: 1;
}

更多信息click here

【讨论】：

【解决方案2】：

定位旋转按钮并将Opacity 设置为1。

<style>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {      
   opacity: 1;    
}
</style>

<span id = "referralValue">
  <input type="number" name="value" value="0.00" min="" max="">
</span>

根据您的方便设置min 和max 值。

【讨论】：

【解决方案3】：

如果您真的想永久使用上下箭头，则需要使用 Javascript 和 CSS 构建您自己的解决方案。

已经有类似的东西叫做HTML5 Number polyfill。

如果你已经在使用 jQuery 或者可以使用它，你应该看看那个。

【讨论】：