web-dev-qa-db-ja.com

FFの選択ボックスからアウトラインを削除します

選択要素内の選択されたアイテムを囲む点線を削除することは可能ですか？

alt text

CSSでoutlineプロパティを追加しようとしましたが、少なくともFFでは機能しませんでした。

<style>
   select { outline:none; }
</style>

更新
先に進んでアウトラインを削除する前に、これをお読みください。
http://www.outlinenone.com/

htmlcssfirefoxxhtml
88
Martin

私は解決策を見つけましたが、それはすべてのハッキングの母であり、他のより堅牢な解決策の出発点として役立つことを願っています。マイナス面（私の意見では大きすぎる）は、text-shadowをサポートしないがrgba（IE 9）をサポートするブラウザーは、Modernizr（テストされていない、単なる理論）。

Firefoxは、テキストの色を使用して点線の境界線の色を決定します。もしそうなら...

select {
  color: rgba(0,0,0,0);
}

Firefoxは点線の境界線を透明にします。しかしもちろん、テキストも透明になります！そのため、何らかの方法でテキストを表示する必要があります。 text-shadowが助けになります：

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

オフセットもぼかしもないテキストシャドウを配置し、テキストを置き換えます。もちろん、古いブラウザはこれについて何も理解していないため、色のフォールバックを提供する必要があります。

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

これがIE9の登場です。IE9はrgbaをサポートしていますが、テキストシャドウはサポートしていないため、空の選択ボックスが表示されます。 text-shadow検出を使用してModernizrのバージョンを取得し、...

.no-textshadow select {
  color: #000;
}

楽しい。

68
methodofaction

Duopixelの答え は完璧です。さらに一歩進めば、防弾にすることができます。

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

そこに行くと、Firefoxでのみ有効で、選択したオプションの周りのい点線の輪郭が消えています。

151
Fleshgrinder

以下は、Firefoxのセレクトボックスに関するスタイリングの問題を解決するソリューションのコラボレーションです。このCSSセレクターを通常のCSSリセットの一部として使用してください。

クラスは質問ごとにアウトラインを削除しますが、背景画像も削除します（通常、カスタムのドロップダウン矢印を使用しており、Firefoxシステムのドロップダウン矢印は現在削除できません）。ドロップダウン画像以外に背景画像を使用している場合は、単にbackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}
17
Wayne Dunkley

一般に、フォームコントロールはその精度でスタイルを設定することはできません。すべてのコントロールで適切な範囲のプロパティをサポートするブラウザーはありません。これが、画像やその他のHTML要素でフォームコントロールを「偽造」し、元の機能をコードでエミュレートする膨大なJavaScriptライブラリが存在する理由です。

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

10
Álvaro González

これは、すべてのFirefoxバージョンを対象とします

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

同じスタイルシートを使用するサイト内の他のページにアウトラインを表示する予定がある場合は、！importantを削除することをお勧めします。

6
Kyzer

<select onchange="this.blur();">

これを使用すると、リストから項目を選択するまで境界線が残ります。

4
malitta

次のいずれかを試してください。

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

参照

1
Catfish

ここに解決策があります

:focus {outline:none;}
::-moz-focus-inner {border:0;}
0
Faizan

Firefoxのすべての選択可能なタグからアウトライン/点線の境界線を削除します。

スタイルシートに次のコード行を追加します。

*:focus{outline:none !important;}
0
Hasnain Mehmood