css中数量加减按钮怎么弄

CSS中的数量加减按钮在网页设计中经常会用到，那么怎么来实现呢？

代码如下：

HTML部分：
<div class="num-wrap">
  <button class="minus">-</button>
  <input type="number" class="num-input" value="1">
  <button class="plus">+</button>
</div>

CSS部分：
.num-wrap {
  display: flex;
  align-items: center;
}

.num-input {
  padding: 5px;
  width: 30px;
  text-align: center;
}

.minus, .plus {
  width: 25px;
  height: 25px;
  background-color: #ccc;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

JS部分：
(function() {
  var input = document.querySelector('.num-input');
  var plusBtn = document.querySelector('.plus');
  var minusBtn = document.querySelector('.minus');
  
  plusBtn.addEventListener('click', function() {
    input.value++;
  });
  
  minusBtn.addEventListener('click', function() {
    if (input.value > 1) {
      input.value--;
    }
  });
})(); 

以上便是一个简单的CSS数量加减按钮的实现方法，其中HTML部分使用了按钮和输入框的结合，CSS部分设置了按钮和输入框的样式，JS部分则是监听按钮的点击事件来改变数量。