一部のブラウザ(Chromeなど)が数値タイプのHTML入力に対して表示する新しいスピンボックスを非表示にする、ブラウザ間で一貫した方法はありますか? 上下の矢印が表示されないようにするCSSやJavaScriptの方法を探しています。
<input id="test" type="number">
このCSSは、webkitブラウザ用にスピンボタンを効果的に隠します(Chrome 7.0.517.44およびSafari Version 5.0.2 (6533.18.5)でテスト済み)。
<! -- begin snippet: js hide: false -->
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />
インスペクタ(webkit、Firefoxの場合はFirebug)を使って、気になる要素に一致するCSSプロパティを探し、疑似要素を探すことができます。この画像は、入力要素 type="number" の結果を示しています。
.
Apple's user experience coding guide for mobile Safari]1によると、iPhoneのブラウザでテンキーを表示するには以下のようにします。
<input type="text" pattern="[0-9]*" />
また、`pattern
の中に \d*
を入れても動作します。
ご質問の内容とは異なりますが、WebKitのスピンボックスのフォーカスバグのため、このようにしています。
// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
var els = document.querySelectorAll("input[type=number]");
for (var el in els)
el.type = "text";
}
あなたが必要としているものの助けとなるアイデアが得られるかもしれません。