如何將焦點放在多個選擇框中的選項上

Question

我想集中討論多個選擇框中的一個選項。 我只希望在多重選擇框中的一個選項上使用虛線邊框（單擊此處以引用圖像） ，並且不希望該選項被完全選中。

我嘗試了類似document.getElementById（“ multiple_dropdown”）。options [2] .focus（）;之類的東西。 但是沒有用

有任何想法嗎 ？

謝謝。

Answer 1

經過更多調查，我發現沒有時間來嘗試更改不同瀏覽器的默認行為，因為它們針對的是多選框中的選項，原因是瀏覽器沒有太多選項可以訪問<多個下拉菜單中的option> s。

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

不幸的是，並非所有瀏覽器都支持option元素的border css屬性。 AFAIK Firefox可以，但是那是唯一的。 因此，您不能僅對其邊界。
如果要選擇某些選項，則可以使用JQuery的

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

這將使您可以訪問<select id="multiple_dropdown">元素的第3個（因為選項計數從零開始） option元素。 如果您想以某種方式挑選它，我可以為您提供使用background-color的示例，例如：

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