136

特定の状況で便利な、これらの矢印を削除するだけです。

ただし、コンテンツが純粋に数値であるというブラウザーの認識を維持したいと思います。したがって、それをに変更することinput[type="text"]は、受け入れられる解決策ではありません。

Opera は Webkit ベースになったので、この質問は重複しています: HTML5 数値入力のスピン ボックスを非表示にできますか?

4

3 に答える 3

335

私はいくつかの単純な 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; 
}
<input type="number" step="0.01"/>

CSS Tricks のこのチュートリアルでは、詳細を説明し、スタイルを設定する方法も示しています。

于 2014-03-10T17:20:42.963 に答える
15

これらの矢印はShadow DOMの一部です。これは基本的に、ページ上の非表示の DOM 要素です。このアイデアに慣れていない場合は、ここで入門書を読むことができます。

ほとんどの場合、Shadow DOM は時間を節約し、優れています。ただし、この質問のように、変更したい場合があります。

適切なセレクターを使用してWebkit でこれらを変更できるようになりましたが、これはまだ開発の初期段階にあります。Shadow DOM 自体にはまだ統一されたセレクターがないため、Webkit セレクターは独自のものです (-webkit他の場合のように、単に を追加するだけではありません)。

このため、Opera はまだこれを追加できていないようです。ただし、Opera Shadow DOM の変更に関するリソースを見つけるのは困難です。私が見つけたいくつかの信頼できないインターネット ソースはすべて、Opera が現在 Shadow DOM 操作をサポートしていないことを述べているか示唆しています。

私は、Dragonflyでそれらを見つけようとするとともに、OperaのWebサイトを調べて、それについての言及があるかどうかを確認するのに少し時間を費やしました...どちらの検索も運がありませんでした. この問題に関する沈黙と、Shadow DOM + Shadow DOM 操作の開発中の性質のため、少なくとも今のところ、Opera ではできないというのが安全な結論のようです。

于 2012-10-28T08:14:14.717 に答える
11

道はない。

この質問は基本的にIs there a way to hide the new HTML5 spinbox controls shown in Google Chrome & Opera?の複製です。ただし、動機が与えられているため、完全な複製ではない可能性があります。

目的が「コンテンツが純粋に数値であることをブラウザーが認識できるようにする」ことである場合、それが実際に何を意味するのかを検討する必要があります。矢印またはスピナーは、場合によっては数値入力をより快適にするための一部です。もう 1 つの部分は、コンテンツが有効な数値であることを確認することです。HTML5 入力拡張をサポートするブラウザーでは、pattern属性を使用してそれを実行できる場合があります。この属性は、3 番目の入力機能、つまり表示される仮想キーボードの種類にも影響を与える可能性があります。

たとえば、入力が正確に 5 桁である必要がある場合 (一部の国では郵便番号がそうである場合など)、<input type="text" pattern="[0-9]{5}">適切な場合があります。もちろん、それがどのように処理されるかは実装に依存します。

于 2012-10-28T07:51:33.113 に答える