Question

我想把重点放在多个选择框中的选项上。我只想在多选框中的一个选项上使用虚线边框线(click here to refer image)，并且不希望完全选择该选项。

我试过像document.getElementById（“multiple_dropdown”）。options [2] .focus（）;但是没有用。

有什么想法吗？

感谢。

Answer 1

经过更多调查后，我发现不值得花时间尝试更改不同浏览器的默认行为，以了解他们如何关注多选框中的选项，原因是浏览器提供的选项不多访问多个下拉菜单中的＆lt; option＆gt;。

Browser | What happens on focus of multiple dropdown after reset ?                     | Is there provision to style/focus a particular option in multiple dropdown ?
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
FF      | Dotted outline border on the very first option in the multiple dropdown      | We can’t set focus on a particular option, but will be able to style particular option like a dotted blue border or background etc.
IE      | Dotted outline border on the lastly selected option in the multiple dropdown | Doesn’t provide way to style/focus particular option in a multiple dropdown
Chrome  | No dotted outline on the option but a Solid thick blue border on the whole multiple dropdown itself | Doesn’t provide way to style/focus particular option in a multiple dropdown
Mac     | Same as chrome (as both are webkit family)                                   | Doesn’t provide way to style/focus particular option in a multiple dropdown

Answer 2

不幸的是，并非所有浏览器都支持border元素的option css属性。 AFAIK Firefox确实如此，但这是唯一的。所以你不能只为它设置一个边界如果要选择某个选项，可以使用JQuery的

$($("#multiple_dropdown").children()[2])

这将使您可以访问option元素的第3个（因为选项计数从零开始）<select id="multiple_dropdown">元素。如果你想以某种方式选择它，我可以提供你使用background-color，例如：

$($("#multiple_dropdown").children()[2]).css('background-color', 'blue')

如何将焦点放在多个选择框中的选项上

2 个答案: