如何將注意力集中在多個選擇框中的選項

Question

我想將注意力集中在多個選擇框中的選項。我只想在多選框中的其中一個選項中選擇虛線邊框線(click here to refer image)，並且不希望選項完全被選中。

我嘗試了一些像document.getElementById（「multiple_dropdown」）。options [2] .focus（）;但沒有工作。

任何想法？

謝謝。

Answer 1

不幸的是，並非所有瀏覽器都支持option元素的border css屬性。 AFAIK Firefox確實，但這是唯一的一個。所以你不能僅僅爲此設置邊界。
如果你想選擇一些選項，你可以使用jQuery的一個<select id="multiple_dropdown">元素的

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

這將讓您獲得第3（因爲選項計數從零開始）option元素。如果你想以某種方式把它挑出來，我可以爲您提供使用background-color，例如：

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

Answer 2

更多的調查之後，我發現它不值得嘗試改變不同的瀏覽器的默認行爲，以時間他們如何專注於多選框中的選項，原因是瀏覽器提供了多個選項來訪問多個下拉菜單中的<選項>。

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