How to minimize the selection field when expanding it in chrome / safari?

Question

I have a requirement in which I have to collapse the selection box when the user freezes by reference.

My code seems to work with FF and IE, but not with Safari and Chrome. Here is a simplified version.

Please let me know what I am missing?

Edit: Thanks Rob for this. When I said: "I need to lose focus," I meant: "I need to minimize the selection window and move the focus / blur."

Edit: I think my question and resume were incorrect / misleading. I tried changing it to show my requirement / question. In any case, this is what I have now. It's a hack, but it seems to be working with Chrome right now, but Safari is still very tough. Any tips?

Answer 1

I assume that this is the way from your need for this, and this is not a “good” solution, but in case someone happens to this. I was able to get it to work in Chrome with your existing code, only hiding the selection when you hover a link and then showing it again when the mouse leaves (I have not tried Safari).

http://jsfiddle.net/52enE/

Another solution to create a dummy choice, but it was indicated as not working in the last chrome at that time:

Run SELECT dropdown with javascript / jQuery

Since the browser controls choices and ways of viewing form elements, there is probably no good way around this ... the “best” (still not very good) solution would probably be to use user input, which acts as a choice, but can be completely controlled call to hide () ... or find a way to change the requirements :)