css - 为输入类型 =“number” 中的任何类型的小数点分隔符获取无效样式

Question

<input type="number" name="quantity2" value="1.1" >

我有一个 CSS，它用无效数据(数字)为输入着色。

但它用小数点或小数逗号为两个输入着色

在这里查看:

http://jsfiddle.net/pjvkh0zc/1/

尝试输入 1.1 或 1,1- 在我的 chrome 上它们都是红色的

Answer 1

你需要添加一个step属性

  input:invalid {
    border: 2px solid red;
  }

<input type="number" name="quantity1" pattern="[-+]?[0-9]*[.,]?[0-9]+" step="any">

<input type="number" name="quantity1" pattern="[-+]?[0-9]*[.,]?[0-9]+" step="0.1">

Numeric input fields can take additional attributes “min” and “step”, which constrain the range of values allowed in your input. The “min” attribute is fairly obvious: it’s the minimum value your number can be. The “step” attribute is less intuitive: by playing with different values, you would most likely work out that it controls the increase/decrease when clicking the up/down buttons on the field. If you input the number 1 and click the up arrow, it will increase to 2. This is because the default step is 1. So far, so obvious. However, the step attribute also determines which values are valid, so a step of 1 means you can enter 1, 2, 3 etc. and a step of 2 means you can enter 2, 4, 6 etc, and when you click the up/down buttons the number will increase/decrease by 2 each time, but entering 3 or 5 in the box will cause a validation error. You can also use a decimal value: for example, a step of 0.3 will allow values such as 0.3, 0.6, 0.9 etc, but not 1 or 2.

But what if you want all the numbers to be valid, integers and decimals alike? In this case, set step to “any”:

<input type="number" step="any" />

Now you don’t get a validation error. Yay! Also note that if you only want to accept positive numbers, you’ll want to add min=”0″.

发现于此 Article