失去焦点后，样式更改仍保留在 select 上？

Question

我有一个页面有多个 select 下拉菜单，我想知道是否有一些简单的方法可以在元素被 selected 并失去焦点后保留样式更改 - 这样用户有一个关于他 select 编辑了哪些元素的视觉线索，即我可能在每个 select 周围都有一个小的绿色边框，这不是默认的“-select-”值。我不是编码员，上面有大约 240 selects，以及其他我不习惯胡闹的代码。

我可以使用伪类突出显示行和 select，但想不出保留视觉提示的简单方法。

http://i.stack.imgur.com/PLcpX.jpg

Answer 1

据我所知，这不能用纯 CSS 来完成。

但是你可以像这样使用JavaScript来达到同样的效果：

document.addEventListener('change', function(event){
    var element = event.target;
    if(element.tagName == 'SELECT'){
        element.style.border = "1px solid green";
    }
});

https://jsfiddle.net/xm1txLws/

更新

要检查是否再次选择了默认选项，您需要执行额外的检查（如果没有为所选选项提供值标签，则该值将成为包含文本）：

document.addEventListener('change', function(event){
    var element = event.target;
    if(element.tagName == 'SELECT'){
        element.style.border = "1px solid green";
        if(element.value == '-select-'){
            element.style.border = "none";
        }
    }
});

https://jsfiddle.net/xm1txLws/3/

失去焦点后，样式更改仍保留在 select 上？

style change remain on select after focus is lost?

css

highlight