Tùy chỉnh CSS cho input type="number" trên Chrome (spinner)

Trên Chrome (WebKit/Blink), <input type="number"> hiển thị spinner (nút tăng/giảm) mặc định. Bạn có thể ẩn hoặc tùy chỉnh nó bằng CSS pseudo-element ::-webkit-inner-spin-button.

1. Ẩn spinner hoàn toàn

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; /* loại bỏ margin mặc định */
}

2. Hiển thị và tùy chỉnh spinner

input[type=number]::-webkit-inner-spin-button {
  opacity: 1; /* hiển thị */
  /* Có thể thêm style khác: width, height, background... */
}

3. Tùy chỉnh spinner ngoài (outer spin button)

input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  /* style tùy chỉnh */
}

Lưu ý

• Chỉ hoạt động trên trình duyệt dựa trên WebKit/Blink (Chrome, Edge, Opera, Safari).
• Firefox dùng input[type=number] { -moz-appearance: textfield; } để ẩn spinner.
• Luôn kiểm tra accessibility: spinner giúp người dùng nhập số dễ dàng hơn.