HTML select with items shown horizontally - html

Question

Good morning,
I'm developing a web application and I need an horizontal input that lets the user select a value, but radio buttons are not an option.
I thought about using a input with range type, but this is not supported in IE 8 or 9.
Is there any way to show select options horizontally that works both in chrome and IE?
My html code is:
<select size="4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
It currently looks like this:
Is there any way to make the options show side by side? I tried adding inline-block display to the options, but nothing changes.
--- EDIT ---
I don't want to use radio buttons because I'm using js to create new items which the user can also select and with radio buttons I have to change the button names manually.

Answer 1

Is this what you're after?
select {
display:table-row;
}
option {
display:table-cell;
}
http://jsfiddle.net/rjmnmcru/

Answer 2

Your best bet is probably to use either checkboxes, or an unordered list with links:
<style type="text/css">
ul.selections { list-style:none; }
ul.selections li {display: inline; list-style-type: none; padding-right: 20px;}
div.selections input { margin-left:15px;}
div.selections input.first { margin-left:20px; }
</style>
<div class="selections">
<input type="checkbox" value="volvo" class="first"/> Volvo
<input type="checkbox" value="saab"/> Saab
<input type="checkbox" value="mercedes"/> Mercedes
<input type="checkbox" value="audi"/> Audi
</div>
<ul class="selections" >
<li>Volvo</li>
<li>Saab</li>
<li>Mercedes</li>
<li>Audi</li>
</ul>
you can use the links or onchecked of the checkboxes to fire JS events. To make it clear to the end user, you can add a "highlight" class to the elements from the JS event, and change the background colors as necessary.

Answer 3

I realize you've already accepted an answer, however this works too.
You can customize anything you want in it, including borders, background colours, etc.
HTML
<div class="container"><span class="user">User 1</span>
<div class="selectOptions">
<div class="myOptions">
<div class="option volvo">Volvo</div>
<div class="option saab">Saab</div>
<div class="option mercedes">Mercedes</div>
<div class="option audi">Audi</div>
</div>
<div class="select user1">User 1</div>
</div>
</div>
CSS
.container {
overflow:hidden;
background-color:#ddd;
padding:5px;
padding-bottom:7px;
}
.user {
float:left;
background-color:#ddd;
margin-top:2px;
padding:5px;
}
.user:after {
content:":";
}
.selectOptions {
float:left;
margin-left:5px;
}
.select {
border:2px solid #333;
padding:5px;
text-align:center;
position:absolute;
background-color:#ddd;
}
.select:hover {
background-color:grey;
cursor:pointer;
}
.myOptions {
position:absolute;
top:45px;
/*42px (height of .select + (padding*2) minus border thickness*/
border:2px solid #333;
display:none;
background-color:#ddd;
}
.option {
display:inline-block;
padding:5px;
}
.option:not(:first-of-type) {
margin-left:-5px;
}
.option:hover {
background-color:#123456;
cursor:pointer;
}
JS
$(".select").hover(function () {
$(this).siblings(".myOptions").css("display", "block");
$(this).css("background-color", "grey");
}, function () {
$(this).siblings(".myOptions").css("display", "none");
});
$(".myOptions").hover(function () {
$(this).css("display", "block");
}, function () {
$(this).css("display", "none");
$(this).siblings(".select").css("background-color", "#ddd");
});
$(".option").hover(function () {
$(this).css("background-color", "#123456");
}, function () {
$(this).css("background-color", "#ddd");
var selection = $(this).html();
if (selection == $(this).parent().siblings(".select").html()) $(this).css("background-color", "grey");
});
$(".option").click(function () {
var selection = $(this).html();
$(this).parent().siblings(".select").html(selection);
$(this).siblings().css("background-color", "#ddd");
$(this).css("background-color", "grey");
});