Different multiple select rendering for each browser

Question

I have the following code:

<select multiple="multiple" id="carros" size="1" name="carros">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

In the internet explorer 10, select render with size equal to one and the navigation arrows as expected, the firefox 27.0.1 renderiza with size one, but without the navigation arrows and the google-Chrome 32.0.1700.102 m never respects the size less than four and only after the fourth element enables the navigation arrows.

I know with css height I would achieve the expected behavior. Is there any way to get google-Chrome and firefox respect the same behaviour as internet explorer 10, with the size really equal to one and with navigation arrows only using HTML?

Follows a fiddle example that should be opened in each browser to view the problem.

Answer 1

In Chrome it is not possible to resolve only with HTML due to a bug unresolved when the attribute size is less than 4.

And Firefox also has a open bug scheduled for future resolution, i.e., they give no priority to this.

I believe that the reason these bugs have never been fixed is that it makes no sense to have a multiple selection element that displays only one element at a time.

When talking about a browser "respecting the behavior" of another, this is a delicate subject, after all each browser has its own characteristics. Probably, IE only works because it uses native Windows components, while other browsers use components of their own. And I think almost no one would want those browsers to go to imitate the IE.

---

Update: alternatives

Thinking about how to solve the issue of not using more screen space and at the same time provide a good user experience across all browsers, the solution I found to be more feasible and straightforward to implement would be the use of a component wrapper at the select HTML. One of them is the jQuery UI Multiselect, although not sure about compatibility in older versions of Internet Explorer.

Another option would be to create a simplified version of the arrows to scroll up and down with Javascript to scroll the select content. Honestly, I don’t know if this solution would behave well in all browsers. I did a very simple test in this fiddle. It is necessary to invest time to test it.

Follow the main code:

$('#up').click(function() {
    $('select').scrollTop($('select').scrollTop() - 10);
});
$('#down').click(function() {
    $('select').scrollTop($('select').scrollTop() + 20);
});

And one last alternative I considered was to resize the field when it gets the focus so that the user can select the items. See the code example:

$('select')
.focus(function() {
    $(this).animate({height: "60px"}, 500);
})
.blur(function() {
    $(this).animate({height: "20px"}, 500);
});

Fiddle