javascript - 当 HTML 下拉菜单上的系统下拉菜单变得可见或模糊时，是否会调用任何操作？

Question

我知道 onFocus ，和onBlur操作存在，但当系统的下拉列表显示在 HTML 下拉列表中时，我找不到任何钩子(Hook) <select>标签。

举个例子，我有一个 <select>输入我想在系统对话显示时将背景变成粉红色的位置。拥有 CSS focus选择器要求您明确单击退出系统对话框，然后再次从 <select> 单击退出表单更改颜色..

这是这种行为的一个 fiddle :https://jsfiddle.net/carlopascual/n5u2wwjg/92994/ 。

希望我们能查清真相!

Answer 1

如果您不介意切换到 select2 https://select2.org/这很容易

$('#example').select2({
  placeholder: 'Select a month',
});

$('#example').on('select2:open', function(e) {
  $('.select2-search').css('background-color', 'pink');
  $('.select2-results').css('background-color', 'pink');
});

$('#example').on('select2:close', function(e) {
  $('.select2-search').css('background-color', 'white');
  $('.select2-results').css('background-color', 'white');
});

这是一个 fiddle

https://jsfiddle.net/rLmztr2d/2476/