バージョン 23 以降の Firefox はこの要素をネイティブにサポートしています<input type="range">が、点線のアウトラインを削除する方法がわかりませんでした。次の CSS は効果がありません。
input[type='range'],
input[type='range']:focus,
input[type='range']:active,
input[type='range']::-moz-focus-inner,
input[type='range']:-moz-focusring {
border: 0;
outline: none;
}
Firefox でこの問題を解決する方法を知っている人はいますか?
残念ながら、できません。(更新; できるようになりました)
これは Firefox のバグであり、ソース ベース自体を修正する以外にこれを修正する回避策はありません (以下を参照)。
Jonathan Watt のブログ(これに取り組んでいる)も参照してください。
既知の問題点：
- デフォルトの CSS スタイルの外観にはまだ作業が必要であり、ネイティブ テーマ (スライダーにオペレーティング システムのテーマの外観を与える) はまだ開発中です ...
このまったく同じ問題に関する彼のブログのコメントへの返信で、彼は次のように述べています。
今はできません - 申し訳ありません。それを可能にするためにバグ932410を提出しました。
これを書いている時点では、これに関する進展はないようであり、正式な修正がいつ利用可能になるかは不明です.
アップデート
この回答が投稿されてから、バグは修正されました。使用できるようになりました（他の回答で述べたように、完全を期すためにここに含めます）：
input[type=range]::-moz-focus-outer {
border: 0;
}
新しいバージョンの Firefox で実行できます。ここに記載されているように、このバグは修正されています。したがって、外側の点線の境界線を非表示にすることができます。::-moz-focus-outerそうするには、次のように の境界線を 0 に設定します。
input[type=range]::-moz-focus-outer {
border: 0;
}
これが実際の例です：http://jsfiddle.net/n2dsc/1/
が設定されている場合、webkit ブラウザーでは外線が表示-webkit-appearance: none;されます。それを削除するには:focus、次のように のアウトラインを none に設定します。
input[type=range]:focus {
outline: none;
}
これが実際の例です：http://jsfiddle.net/8b5Mm/1/
ラッピング要素に落ち着くことができる場合 (すでにラッピングLIまたはがある可能性がありますP)、FireFox 専用 CSS を使用して、入力をビューの外に配置し、トラック/サムをビュー内に再配置できます。
translateX- FireFoxは実際に親指をスライドさせるためにそれを使用していると思います - だから固執してくださいtranslateYtranslateY(-1000em))、キーボード ナビゲーションの操作性が損なわれます。どうぞ:
HTML
<span class="range-wrap"><input type="range" /></span>
CSS
.range-wrap {
overflow: hidden;
}
input[type='range'] {
-moz-transform: translateY(-3em);
}
input[type='range']::-moz-range-track {
-moz-transform: translateY(3em)
}
input[type='range']::-moz-range-thumb {
-moz-transform: translateY(3em);
}
それはいけません。Firefox のバグのようです。
範囲要素の 2 つのアウトラインを作成します。1 つは CSS 設定によって影響を与えることができ、もう 1 つは操作に対して耐性があります。
問題を表示するためにアウトラインを表示するように設定しました。
input[type='range']:focus {
outline: 5px solid green;
}
ここでそれを見ることができます：
Mozilla の構成セクションでほとんど調査していないので、これも追加します
:-moz-any-link:focus {
outline: none;
}
a, a:active, a:visited, a:hover {
outline: 0;
}
それから
:focus {
outline: none;
}
それから
::-moz-focus-inner {
border: 0;
}
ここに解決策があります
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}