Question

我有一个包含多个选择下拉菜单的页面，并且想知道是否有一些简单的方法，一旦选择了一个元素并失去焦点，它会保留一个样式更改 - 这样用户就可以看到他有哪些元素的视觉线索选择即我可能在每个选项周围都有一个小的绿色边框，这是默认的＆＃34; -select - ＆＃34;值。我不是一个程序员，它上面有大约240个选项，以及其他我不习惯的代码。

我可以突出显示该行并选择使用伪类，但无法想出一种保留视觉提示的简单方法。

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/

焦点丢失后样式更改是否保持选中状态？

1 个答案: