在HTML中，當<input>元素的type屬性被設置為number時，瀏覽器通常會默認顯示一個小的上下箭頭按鈕（通常位于輸入框的右側），用于允許用戶通過點擊增加或減少輸入的值。然而，有時候為了設計的一致性或其他原因，你可能想要去除這個小按鈕。

盡管直接通過CSS去除這個按鈕并不總是完全可行（因為這主要依賴于瀏覽器的默認樣式），但你可以通過一些技巧來隱藏它。以下是一些常用的方法：

方法1：使用CSS的appearance屬性

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

這段代碼通過-webkit-appearance: none;去除了Chrome、Safari等基于WebKit的瀏覽器中的小按鈕，并通過-moz-appearance: textfield;影響了Firefox的顯示方式。不過，需要注意的是，這種方法并不是在所有情況下都能完美工作，尤其是舊版本的瀏覽器或特定的瀏覽器設置中。

方法2：通過包裹<input>的<div>或<span>來隱藏

如果你發現上述CSS方法在某些情況下不起作用，你可以嘗試通過HTML和CSS的結合來隱藏這個小按鈕。這種方法涉及到將<input>元素包裹在一個<div>或<span>元素中，并設置適當的CSS來隱藏或覆蓋這個小按鈕。

<div class="number-input-wrapper">  <input type="number" />  
</div>

.number-input-wrapper {  position: relative;  width: 100px; /* 根據需要調整 */  height: 30px; /* 根據需要調整 */  
}  .number-input-wrapper input[type="number"] {  /* 樣式設置 */  width: 100%;  height: 100%;  padding-right: 20px; /* 根據需要調整，用于給右側的“隱藏”空間 */  text-align: right; /* 如果需要的話 */  
}  /* 這里并沒有直接隱藏按鈕的代碼，而是提供了一種可能的解決方向，  即通過調整input的樣式和父容器的樣式來間接“隱藏”按鈕。  實際上，這種方法可能需要結合JavaScript來精確控制。 */

注意：由于瀏覽器的渲染差異，上述方法可能并不總是完全有效。特別是，直接通過CSS完全隱藏<input type="number">的箭頭按鈕在技術上可能是一個挑戰，因為它涉及到瀏覽器如何解釋和渲染HTML表單控件的默認樣式。

結論

盡管有多種嘗試去除<input type="number">的箭頭按鈕的方法，但直接通過CSS完全可靠地去除它并不總是可能的。這主要是因為瀏覽器的默認樣式和渲染行為可能會有所不同。如果可能的話，考慮使用JavaScript來增強用戶體驗或尋找其他設計替代方案可能是更好的選擇。