2012-10-28 9 views
77

これらの矢印を削除したい場合は、特定の状況で便利です。オペラの入力[type = "number"]から矢印を削除する方法

私はコンテンツが完全に数字であるというブラウザの認識を保持したいと思います。したがって、それをinput[type="text"]に変更することは容認できる解決策ではありません。


今、OperaがWebKitのベースであることを、この質問はのdulpicateです:Can I hide the HTML5 number input’s spin box?

+0

私は、これは標準の文字列だけのcompairingを可能にすることはできないと思います。 – rekire

+0

これは古い質問ですが、それでもまだ答えられていない場合は、このリンクは役に立ちますか? http:// css-tricks。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

+1

特にリンクは重要です!ありがとう – craphunter

+16

誰もがWebKitベースのブラウザを使用しているわけではないので、https://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29 –

+0

クリックしてarowsをクリックするとインクリメントとデクリメントのプロパティを削除したい – byteC0de

8

方法はありません。

この質問は、基本的に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}">で十分です。もちろん、それはどのように処理されるかは実装に依存します。

+0

あなたは保存しようとしているのと同じ機能を達成することができます... – JayD

+3

大きな数字を入力したい場合、金額として。同時に、それらの属性の最小値と最大値が必要になる場合があります。例、どれくらい投資したいですか?それは何千もの量になりますが、5000分と20000分の最大値を持つかもしれません。 – Puce

13

これらの矢印は、基本的にあなたのページ上に隠されているDOM要素であるShadow DOMの一部です。あなたがこのアイデアを初めて知りたければ、良い入門書can be found hereを読んでください。

ほとんどの場合、シャドーDOMは私たちの時間を節約し、良いです。しかし、この質問のように、あなたがそれを修正したい場合があります。

ウェブキットwith the right selectorsではこれを変更できますが、これはまだ開発の初期段階です。 Shadow DOM自体には統一セレクタがまだないので、Webkitセレクタは独自のものです(他の場合と同様に、-webkitを追加するだけではありません)。

このため、Operaはこれをまだ追加していない可能性が高いようです。しかし、Opera Shadow DOMの修正に関するリソースを見つけることは難しいです。いくつかunreliable internet sources私はOperaが現在シャドウDOM操作をサポートしていないと言ったり、示唆しています。

オペラのウェブサイトを見て、それが何か言及されているかどうか、そしてトンボで見つけようとしているかどうかを調べるのに少し時間を費やしました。この問題についての沈黙と、シャドーDOM +シャドーDOM操作の発展の性質のために、少なくとも今のところOperaでそれを行うことはできないという安全な結論になっているようです。

関連する問題