Question

我可以设置select框的下拉图标的样式。但是，我想根据下拉列表是否可见来切换图标。

当下拉列表不可见时，请显示icon1
当用户点击下拉列表时，显示icon2
当用户关闭下拉列表时，再次显示icon1。

我所做的就是使用:focus select来操纵图标。

问题出在最后一步。当用户单击屏幕上的任意位置 - 或按ESC键 - 关闭下拉列表时，焦点仍然在select标记上，并且样式不会更改回来。只有在用户再次点击之前，焦点才会被删除，一切都恢复正常。

下拉关闭时是否有办法强制移除焦点？

这在Chrome中进行了检查。

https://codepen.io/igorspasic/pen/GQqKqy

P.S。当然欢迎使用javascript。

Answer 1

您应该可以使用JavaScript将其设置为模糊。在这里，我使用了change和mouseout事件来消除焦点：

＆＃13;

var select = document.querySelector('#x');

function blurSelect() {
  select.blur();
}

document.onkeyup = function(e){
  if (e.keyCode === 27) {
    blurSelect()
  }
};

select.onmouseout = function() {
  blurSelect()
};

＆＃13;

select {
  color: white;
  background-color: blue;
  font-size: 20px;
}

select:focus {
  background-color: red;
}

＆＃13;

<select id="x">
  <option>One</option>
  <option>Two</option>
</select>

<br><br><br>
Q: How to remove focus on select when dropdown is closed and turn back to blue?

＆＃13;

希望这有帮助。

Answer 2

您可以包含jQuery库，并在＆lt; script＆gt; 标记中添加以下jQuery代码。

$(document).ready( function() {
    $(document).keyup(function(e) {
        if (e.keyCode == 27) {
            $("#x").blur();
        }
    });
    $("#x").change( function() {
        $("#x").blur();
    });
});

使用CSS切换点击的样式下拉图标？

2 个答案: