html - 選択タグ内の項目を選択/強調表示するFirefox/InternetExplorerの動作

Question

Firefoxで、矢印をクリックしてドロップダウンの「選択」タグを開き、1つのオプションをポイントすると、予想どおり、行が青色の背景で強調表示されます。これで問題ありません。

ただし、Internet Explorerでは、選択するオプションをクリックしてそれが選択されたオプションになると、選択タグの外側のどこかをクリックするまで青い強調表示が残ります。

その動作を変更する方法はありますか？

Answer 1

1つの方法は、JavaScriptを使用することです。私はそれを簡単にするためにjQueryを使用しました：JSFiddleの例。

$('select').change(function() {
    $(this).blur();
})

これにより、オプションが選択されたときに要素からフォーカスが削除されます。

この純粋なJavaScriptを実行するには、を使用しますonchange。

Answer 2

私はこの問題を抱えていて、James Donnellyのソリューションを使用しましたが、現在のオプションが選択されている場合にハイライトが残るのを防ぎたいと思いました（IEでJamesのjsfiddleを試すか、wilsonrufusのコメントを参照してください）。

オプションにクリックハンドラーを配置すると、それを回避できるようです。

var select = $('select');

select.change(function() {
    select.blur();
})

$('select option').click(function() {
    select.blur();
})

Answer 3

これにより、同じオプションを選択するだけでなく、新しいオプションを選択することもできます。

$('select > option').click(function () {
    $(this).parent().blur();
})