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
In Chrome, you can not resolve to HTML only because of an unresolved bug when the size attribute is less than 4.
And Firefox also has an open bug marked for future resolution, ie they do not give no priority for this.
I think the reason for these bugs never having been fixed is that it does not make sense to have a multiple selection element that displays only one element at a time.
When you talk about a browser "respect 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 proprietary components. And I think almost anyone would want those browsers to emulate IE.
Update: Alternatives
Thinking about how to resolve the issue of not using more screen space while providing a good user experience across browsers, the solution I found to be more feasible and straightforward to implement would be to use a wrapper to select of HTML. One of them is jQuery UI MultiSelect , although you're not sure about the compatibility in the versions Internet Explorer.
Another option would be to create a simplified version of the up and down arrows with Javascript to scroll the select content. I honestly do not know if this solution would behave well in all browsers. I did a pretty simple test in this fiddle . You need to invest some 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 resizing the field when it gets focus so the user can select the items. See the code sample:
$('select')
.focus(function() {
$(this).animate({height: "60px"}, 500);
})
.blur(function() {
$(this).animate({height: "20px"}, 500);
});