防止在更改

Question

如何在select属性更改时阻止html size的样式更改？

<svg>

<foreignObject>
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}"  onchange='this.size=1;' onblur="this.size=0;">
             <option value="1">This is select number 1</option>
             <option value="2">This is select number 2</option>
             <option value="3">This is select number 3</option>
             <option value="4">This is select number 4</option>
             <option value="5">This is select number 5</option>
             <option value="6">This is select number 6</option>
             <option value="7">This is select number 7</option>
             <option value="8">This is select number 8</option>
             <option value="9">This is select number 9</option>
             <option value="10">This is select number 10</option>
             <option value="11">This is select number 11</option>
             <option value="12">This is select number 12</option>
           </select>
        </foreignObject>   
           </svg>

Here是一个小提琴，因为出于某些原因我无法在SO小提琴中运行html。

我尝试做的是使用Chrome开发工具捕获所有样式更改，但它们中有太多（更改）。

我需要更改大小，以便能够对select中一次显示的选项数量设置约束。

为了避免可能的x-y问题：我需要使用svg和html foreignObject在select中制作可滚动的下拉列表。

我希望一次只能选择一个选项。

根据this问题，特别是答案：

  

行为取决于浏览器，不能由作者控制。您可以在元素中使用size = 10属性，但它也会将菜单更改为列表框，这样即使菜单没有聚焦，也可以看到10个选项。要实现您描述的行为，您需要使用JavaScript和CSS构建自己的控件。

我可能会说我的问题是保留menu而不是将样式更改为listbox样式。