web-dev-qa-db-ja.com

Operaのinput [type = "number"]から矢印を削除する方法

これらの矢印を削除しようとしているだけなので、状況によっては便利です。

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

OperaはWebkitベースであるため、この質問は次のようになります。 HTML5番号入力のスピンボックスを非表示にできますか？

csshtml5formsinputopera
107
anthonyryan1

私はいくつかの単純な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のチュートリアルで詳細に説明されており、それらのスタイル設定方法も説明されています

267
JayD

これらの矢印は Shadow DOM の一部で、基本的にはあなたのページに隠されているDOM要素です。あなたがその考えに慣れていないのであれば、よい入門書を読んでください ここで見つけることができます 。

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

あなたは今Webkitでこれらを修正することができます 正しいセレクターで 、しかしこれはまだ開発の初期段階にあります。 Shadow DOM自体にはまだ統一されたセレクターがありませんので、Webkitセレクターは独自のものです（そして他の場合のように-webkitを追加するだけの問題ではありません）。

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

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

14
jamesplease

道はない。

この質問は基本的に Google ChromeおよびOperaに表示される新しいHTML5スピンボックスコントロールを非表示にする方法はありますか？ の重複です。

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

たとえば、入力を正確に5桁にする必要がある場合（国によっては郵便番号がそうであるように）、<input type="text" pattern="[0-9]{5}">で十分な場合があります。処理方法は実装依存です。

11
Jukka K. Korpela