6

ここに私のHTMLがあります：

<select style="background-color:#e0f0f1">
  <option selected="selected">Select</option>
  <option class="" value="one">One</option>
  <option class="" value="two">Two</option>
</select>

このコードを実際に見る

IE および Opera では、オプションを選択すると、青色の背景色で強調表示されます。Firefox、Chrome、および Safari はこれを行いません。元の背景色が常に表示されるように、オプションが選択されているときにその青いハイライトを削除する方法またはトリックはありますか?

それが不可能な場合、オプションが選択された直後にページの他の場所でクリックをシミュレートする jQuery 動作を追加する方法はありますか? したがって、基本的に、選択したオプションから離れてクリックすると、ハイライトが消えます。

4

3 に答える 3

6

IE11（以前のバージョンについては不明）では、フォーカスされた選択要素から青い背景を削除できます

select::-ms-value {background: none;}

ダブレットのデモはこちら

于 2014-04-05T02:17:16.450 に答える
3

私はこれに対する解決策を見つけたと思います。おそらくあまりきれいな解決策ではありませんが、このトリックは機能します。

Firefox、Chrome、Safari、Opera、IE 9 でテストしました。それらすべてで動作しますが、古いバージョンの IE (6 および 7) では動作しません。IE8 ではテストしていません。誰かが Mac でテストして、これが機能するかどうかを教えてくれれば、それは素晴らしいことです。

幅と高さが 0 の入力フィールドを追加し、オプションをクリックするとフォーカスが移動します。入力フィールドで display:none と visibility:hidden を使用しても機能しません。したがって、入力フィールドを隅のどこかに隠すか、z-index を使用してコンテナーの後ろに移動することもできます (ただし、これは試していません)。誰かがより良い解決策を持っている場合は、私に知らせてください。

HTML:

 `<select style="background-color:#e0f0f1">
    <option selected="selected">Select</option>
    <option class="" value="one">One</option>
    <option class="" value="two">Two</option>
  </select>
  <input type="text" id="abc" style="width:0; height:0;" />`

jQuery:

$(document).ready(function(){
  $('select option').on('click', function() { $('#abc').focus(); });
});

これをフィドルで見る

于 2012-11-01T03:55:09.377 に答える
0

これはブラウザのデフォルトの動作であるため、実際には実行できません。おそらく最良の選択肢は、選択ボックスをjQuery Chosenプラグインなど、スタイルを設定できる同様の機能に置き換えることです。

于 2012-11-01T02:38:52.667 に答える