<div class="qty">
		<div id="down">-</div>
		<input type="number" id="textBox">
		<div id="up">+</div>
	</div>
.qty {
  background: #f1ede9;
  padding: 20px 10px;
  border-radius: 10px;
  display: flex;
  width: fit-content;
  margin: 60px auto;
}
#down, #up {
  font-size: 25px;
  padding: 0 14px;
  cursor: pointer;
  user-select: none;
}
#textBox {
  border: none;
  background: none;
  font-size: 18px;
  text-align: center;
  width: 70px;
}
/* [input type="number"]のデフォルトの矢印を消す */
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; 
  margin: 0; 
  -moz-appearance:textfield; 
} 
const qtyDown = document.getElementById('down');
		const qtyUp = document.getElementById('up');
		const qtyText = document.getElementById('textBox');
		let num = 1;
		qtyText.value = num;

		qtyDown.addEventListener('click', () => {
			if(parseInt(qtyText.value) >= 2) {  // 1以下にならないように設定
				num--;
				qtyText.value = num;
			}
		});
		qtyUp.addEventListener('click', () => {
			num++;
			qtyText.value = num;
		});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.