如何在Opera中刪除輸入[type =「number」]中的箭頭

只需要刪除這些箭頭，在某些情況下很方便。如何在Opera中刪除輸入[type =「number」]中的箭頭

但我想保留瀏覽器對純粹數字內容的意識。因此將其更改爲input[type="text"]不是一個可接受的解決方案。

現在歌劇是基於WebKit，這個問題的dulpicate：Can I hide the HTML5 number input’s spin box?

來源

2012-10-28 anthonyryan1

我覺得這是不可能的標準只是允許字符串compairing。 – rekire

我知道這是一個老問題，但爲防萬一還沒有被回答，這個鏈接有幫助嗎？ HTTP：// CSS-技巧。com/snippets/css/turn-off-number-input-spinners/ – drumwolf

191

我一直在使用一些簡單的CSS，它似乎刪除它們，並正常工作。

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

This tutorial from CSS Tricks explains in detail & also shows how to style them

來源

2014-03-10 17:20:42 JayD

尤其是鏈接很重要！謝謝 – craphunter

+16

因爲不是每個人都使用基於WebKit的瀏覽器：https://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29 –

我想刪除遞增和遞減屬性，當點擊arows – byteC0de

沒有辦法。

這個問題基本上是Is there a way to hide the new HTML5 spinbox controls shown in Google Chrome & Opera?的重複，但可能不是完整的重複，因爲動機是給定的。

如果目的是「瀏覽器意識到內容是純粹的數字」，那麼你需要考慮那是什麼意思。箭頭或旋鈕是在某些情況下使數字輸入更舒適的一部分。另一部分是檢查內容是否是有效的數字，並且在支持HTML5輸入增強功能的瀏覽器上，您可以使用pattern屬性來完成此操作。該屬性也可能會影響第三個輸入功能，即可能出現的虛擬鍵盤的類型。

例如，如果輸入應該正好是5位數（如某些國家的郵政編號可能是這樣），那麼<input type="text" pattern="[0-9]{5}">就足夠了。它當然是依賴於實現的，它將如何處理。

來源

2012-10-28 07:51:33

你可以實現你想要保留的同樣的功能，也可以刪除spinners ... – JayD

如果你想輸入大數字，spinners是完全沒有用的作爲金額。同時你可能需要它們的最小和最大屬性。例如，你想投資多少？這將是一個數以千計的數量，但它可能有5000和最大20000分鐘。旋轉，寶貝。 – Puce

這些箭頭是Shadow DOM的一部分，它們基本上是頁面上的DOM元素，它們對您而言是隱藏的。如果您對這個想法不熟悉，請閱讀can be found here。

大多數情況下，Shadow DOM爲我們節省了時間並且很好。但有些情況下，像這個問題，你想修改它。

您可以在Webkit中修改這些現在的with the right selectors，但這仍處於開發的早期階段。 Shadow DOM本身還沒有統一的選擇器，所以webkit選擇器是專有的（並且不像其他情況那樣追加-webkit）。

因此，Opera似乎還沒有到處添加這個功能。不過，查找有關Opera Shadow DOM修改的資源非常困難。幾個unreliable internet sources我發現所有人都說或建議Opera目前不支持Shadow DOM操作。

我花了一點時間瀏覽Opera網站，看看是否有任何提及它，並嘗試在Dragonfly中找到它們......這兩個搜索都沒有任何運氣。由於在這個問題上的沉默，以及Shadow DOM + Shadow DOM操作的發展性質，似乎是一個安全的結論，您在Opera中至少現在不能這樣做。

來源

2012-10-28 08:14:14 jmeas

如何在Opera中刪除輸入[type =「number」]中的箭頭

回答

相關問題