How could I prevent style changing of the html select on size attribute changing?
<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 is a fiddle, because for some reasons I can not run the html in the SO fiddle.
What I tried to do is to catch all style changes using the Chrome dev tools, but there are too many of them (changes).
I need to change the size so that to be able put a constraint onto the number of the options visible at once in the select.
In order to avoid a possible x-y problem: I need this to make a scrollable dropdown in svg using the foreignObject and html select.
I would like to be able to select only one option at a time.
According to this question, specifically to the answer:
The behavior depends on the browser and cannot he controlled by the author. You can use the size=10 attribute in the element, but it also changes the menu to a listbox so that 10 options will be visible even when the menu is not focused on. To achieve the behavior you describe, you would need to build your own controls using JavaScript and CSS.
I may tell that my question is about preserving the menu and not changing the style to the listbox style.
