Why are the default selections not overflowing: hidden?

Question

First check this script -> http://jsfiddle.net/xV4s3/

As you can see, we have a wrapper with overflow: hidden and inside there is a native select with three parameters and ul style, similar to a choice with three elements.
Now, when you click on ul, you can see its height changes (due to the script), but nothing is visible outside the shell due to overflow: hidden . And it works as expected.

My question is about the default options for select , as I could not find anything in the specs.
Why are they not affected by overflow: hidden ?

Answer 1

This is probably nothing more than an implementation detail. The only thing CSS2.1 says about overflow control is that the overflow property controls the overflow of content according to the containing block to which the property applies. It does not define the behavior and rendering of form elements, etc. Regarding this property.

As I said, it’s clear that the drop-down menu is not created as a descendant of the wrapper or even the select element. In fact, it is possible that most browsers prefer to display it completely independently of the canvas and as a user interface element at the application or system level in their own right (probably for reasons of usability). Note that while you can apply CSS to option elements to influence how the drop-down menu is displayed, you cannot actually style the drop-down menu.