使用CSS自定义类型编号输入上的增量箭头 [英] Customizing Increment Arrows on Input of Type Number Using CSS

问题描述

我有一个使用以下代码呈现的数字类型输入:

I have an input of type number that is rendered using the following code:

<input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number">

它看起来像这样:

我想把它变成这样:

第二个视图使用两个单独的按钮进行仿真.

The second view is emulated using two separate buttons.

我如何按照所描述的那样设置箭头的样式?

How could I style the arrows as described?

推荐答案

tl; dr:

多次被问及以下设置，我决定为其添加一个演示(Bootstrap 4 + jQuery + Font Awesome输入组设置):

Having been asked in private about the following setup quite a few times, I decided to add a demo for it (Bootstrap 4 + jQuery + Font Awesome input-group setup):

$('.btn-plus, .btn-minus').on('click', function(e) {
  const isNegative = $(e.target).closest('.btn-minus').is('.btn-minus');
  const input = $(e.target).closest('.input-group').find('input');
  if (input.is('input')) {
    input[0][isNegative ? 'stepDown' : 'stepUp']()
  }
})

.inline-group {
  max-width: 9rem;
  padding: .5rem;
}

.inline-group .form-control {
  text-align: right;
}

.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="input-group inline-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary btn-minus">
      <i class="fa fa-minus"></i>
    </button>
  </div>
  <input class="form-control quantity" min="0" name="quantity" value="1" type="number">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary btn-plus">
      <i class="fa fa-plus"></i>
    </button>
  </div>
</div>

长(初始)答案:

本机input[type=number]控件不是可样式化的跨浏览器.实现所需的跨浏览器/跨设备的最简单，最安全的方法是使用以下方法隐藏它们:

The native input[type=number] controls are not style-able cross-browser. The easiest and safest way to achieve what you want cross-browser/cross-device is to hide them using:

input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}

......允许您使用自定义按钮，如果您保留输入的type="number"，则可以将其链接以执行微调器(箭头)将执行的功能(.stepUp()和.stepDown()).

...which allows you to use your custom buttons, which could be linked to execute the functions the spinners (arrows) would (.stepUp() and .stepDown()), provided you keep the input's type="number".

例如:

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

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

.number-input {
  border: 2px solid #ddd;
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  height: 2px;
  background-color: #212121;
  transform: translate(-50%, -50%);
}
.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  font-family: sans-serif;
  max-width: 5rem;
  padding: .5rem;
  border: solid #ddd;
  border-width: 0 2px;
  font-size: 2rem;
  height: 3rem;
  font-weight: bold;
  text-align: center;
}

<div class="number-input">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
  <input class="quantity" min="0" name="quantity" value="1" type="number">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
</div>

注意:要更改输入的值，需要先找到它.为了提供灵活性，在上面的示例中，我将按钮和<input>分组在一个公共父项下，并使用该父项查找<input>(选择不依赖于它们在DOM中的接近度或特定顺序).上面的方法 将更改任何 input[type=number] 同级按钮 .如果那不方便，则可以使用任何其他方法从按钮中查找输入:

Note: In order to change the input's value, one needs to find it. To provide flexibility, in the example above I grouped buttons and the <input> under a common parent and used that parent to find the <input> (choosing not to rely on their proximity or particular order in DOM). The above method will change any input[type=number] sibling to the buttons. If that's not convenient, one could use any other methods to find the input from the buttons:

• 通过 id :.querySelector('#some-id'):

<button onclick="this.parentNode.querySelector('#some-id').stepUp()"></button>

• 通过 className :.querySelector('.some-class'):
• by className: .querySelector('.some-class'):

<button onclick="this.parentNode.querySelector('.some-class').stepUp()"></button>

还请注意，上述示例仅在.parentNode内部而不是整个document中进行搜索，这也是可能的:
即:onclick="document.getElementById('#some-id').stepUp()"

Also note the above examples only search inside the .parentNode, not in the entire document, which is also possible:
i.e: onclick="document.getElementById('#some-id').stepUp()"

• 通过 邻近 (previousElementSibling | nextElementSibling)
• by proximity (previousElementSibling | nextElementSibling)

<button onclick="this.previousElementSibling.stepUp()"></button>

• 确定和查找DOM结构中特定输入元素的任何其他方式.例如，可以使用第三方库，例如jQuery:

<button onclick="$(this).prev()[0].stepUp()"></button>

使用jQuery时的重要注意事项是stepUp()和stepDown()方法放在DOM元素上，而不是jQuery包装器上. DOM元素位于jQuery包装器的0属性内.

An important note when using jQuery is that the stepUp() and stepDown() methods are placed on the DOM element, not on the jQuery wrapper. The DOM element is found inside the 0 property of the jQuery wrapper.

注意.单击<form> 中的<button>将触发表单提交.因此，如果按上述方式在内部表单中使用，则onclick也应包含preventDefault();.示例:

Note on preventDefault(). Clicking a <button> inside a <form> will trigger the form submission. Therefore, if used as above, inside forms, the onclick should also contain preventDefault();. Example:

<button onclick="$(this).prev()[0].stepUp();preventDefault()"></button>

但是，如果使用<a>标签而不是<button>，则没有必要.另外，可以为带有小JavaScript代码段的所有表单按钮全局设置预防措施:

However, if one would use <a> tags instead of <button>s, this is not necessary. Also, the prevention can be set globally for all form buttons with a small JavaScript snippet:

var buttons = document.querySelectorAll('form button:not([type="submit"])');
for (i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(e) {
    e.preventDefault();
  });
}

...或者使用jQuery:

... or, using jQuery:

$('form').on('click', 'button:not([type="submit"])', function(e){
  e.preventDefault();
})

这篇关于使用CSS自定义类型编号输入上的增量箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！