css 当右对齐时,如何向input type=“number”添加padding-right?

k2fxgqgv  于 2022-12-24  发布在  其他
关注(0)|答案(6)|浏览(199)

我真不敢相信我一直没能找到关于这个问题的任何东西。
在我的新项目中,未来的用户将有一个包含一些input type="number"的列,而作为数字字段(没有一个text字段),我希望数字向右对齐。
我发现数字太接近箭头,所以,逻辑上,我添加到他们的padding-right
令我惊讶的是,我似乎无法将数字与箭头分开一点。padding-right沿着数字移动箭头。
基本上只有Operapadding的正确方式。但不是其他主要的3个浏览器,我已经测试到目前为止,你可以看到在下面的图像。

那么,有没有办法把数字和箭头分开,至少在FirefoxChrome中可以使用(就像我们推荐的这两种浏览器一样)?
一个JSFIDDLE的简单示例

ej83mcc0

ej83mcc01#

使用以下CSS而不是padding-right

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { margin-left: 20px; }

对于Firefox,上述解决方案不起作用,所以最好的解决方案就是隐藏它:

input[type=number] {
    -moz-appearance:textfield;
}

或者您可以尝试“玩”一些jquery插件。

suzh9iv8

suzh9iv82#

这是相当烦人的,在我的情况下,我通过将旋转器传递到左侧来解决这种情况。

<input dir="rtl" type="number"/>
zpqajqem

zpqajqem3#

    • 在CSS中左对齐字段**
[type="number"] {
  text-align: right;
  direction: rtl;
}
<input type="number" min="0" max="9999" placeholder="Enter value ...">
  • @佩德罗·帕姆建议 *
blmhpbnm

blmhpbnm4#

也老了,如果这种情况再次发生,我主要把这个留给自己。我遇到过类似的问题,下面是我解决它的方法。它假设你有一个最大值:否则,请将最大值设置得足够高,以使用户永远无法达到该值。

<input type="number" min="1" max="999999" step="1" name="whatever-your-number-field-is" />

在我的例子中,解决这个问题的关键是最大值...更具体地说,最大值中的字符/位数。使用上面的例子,我们有6位数。
这在我编写CSS规则时就开始起作用了。首先,我使用了上面的webkit-outer-spin-button/webkit-inner-spin-button/Firefox规则,并做了一个小改动...我使用ems作为边距:

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { margin-left: 0.5em;} 
input[type=number] {-moz-appearance:textfield;}

然后我用上面的位数定义了宽度。

input[type='number'] {width: 6em; text-align: right;}

现在,由于这是一个数字字段,用户可以"type over the boundary"并键入一个数字,例如99999999。在这些情况下,我使用了jQuery keyup函数自动将数字降低到最大值。
我将把它放在下面的片段中,以便您可以看到它。
一个三个三个一个

ldioqlga

ldioqlga5#

webshims.setOptions('forms-ext', {
  replaceUI: 'auto',
  types: 'number'
});
webshims.polyfill('forms forms-ext');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<div class="form-row">
  <input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="currency" id="c1" />
</div>

Webshim是一个polyfill库,它使您能够跨浏览器可靠地使用HTML5功能,即使缺少原生支持。
JSFiddle demo

62o28rlo

62o28rlo6#

我知道这是旧的,但我找到了另一个"解决办法",在绊倒这个之后。
一种解决方案是使用文本缩进和Calc:

[type="number"] {
    text-indent: calc(100% - 20px);
}

我发现这个解决方案通过检查可能的CSS属性输入:https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls

    • 编辑:**

对不起,这只适用于固定的定义数字长度,因为它仍然是左对齐。
使用下面代码Pen中的方法(计算实际文本大小)可以实现具有该属性的大量JS解决方案:https://codepen.io/Momciloo/pen/bpyMbB

相关问题