Shopify購物車中的+/-數字增量

Question

我正在開發我的第一個自定義shopify網站，但我正在嘗試添加功能。

我需要使用文本類型而不是數字類型來實現購物車數量的+/-數字增量（以刪除向上，黎明箭頭）。

像這樣：

+-數字增量

這是HTML輸入標簽

  <input type="number" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*" data-quantity-item="{{ forloop.index }}"> 

Answer 1

 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> 

您可以使用CSS執行此操作：

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

  <input type="number" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*" data-quantity-item="{{ forloop.index }}">