27

Chromeやその他のブラウザでは、ドロップダウンは問題なく表示されます:

ここに画像の説明を入力

ただし、Firefoxでは不要な点線が表示されます。

ここに画像の説明を入力

これらの CSS ステートメントを使用して、ボタンと入力要素の不要な Firefox の点線を正常に削除しました。

button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }

したがって、これらは選択/オプション要素で機能すると思いましたが、機能しません:

select::-moz-focus-inner { border: 0; }
option::-moz-focus-inner { border: 0; }

このドロップダウンの点線を削除して、Chrome や他のブラウザーと同じように表示するにはどうすればよいですか?

補遺

これらも機能しません:

select::-moz-focus-inner { border: 0; outline: 0 }
option::-moz-focus-inner { border: 0; outline: 0 }

これらも：

select { outline: 0; }
option { outline: 0; }

これらも：

select { outline: none; }
option { outline: none; }
4

5 に答える 5

5

そのための組み合わせたハックを次に示します。

select:focus {
    outline: 1px solid white;
    outline-offset: -2px;
}
select ~ input[type=button] {
    -moz-appearance: menulist-button;
    margin-left: -19px;
    width: 18px;
    height: 18px;
    z-index: 10;
}

次に、各選択の後に tabindex=0 で入力を追加し、フォーカスの「委譲」のコードを追加します。

$("select ~ input[type=button]").addEvent('focus', function(){
  this.getPrevious().focus();
});
于 2011-02-06T14:10:25.710 に答える
-5

outline: 0,ボタンに作品を使ってみてください

于 2011-02-06T12:58:48.113 に答える