Menu
I am having an issue where I cannot get the same bit of CSS to render the same across Firefox and Chrome. Instead of a vertical select box of 24 values, they all appear in a line next to each other in Firefox:
In Chrome, they appear as a vertical multiple select box.
Complete code for an abbreviated 3 hour example:
<html>
<head>
<style type="text/css">
option { display: inline; }
</style>
</head>
<body>
<form>
<select id="aryHours[]" class="select_hours" size="1" multiple="multiple" name="aryHours[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</body>
</html>
In Chrome, the options do not display inline.
Any explanations why this code does/does not work and are there any other ways to achieve the same layout?
285
I don't think you should (can?) make <option> elements inline like that. Try using checkboxes instead. Something like this:
<!DOCTYPE html>
<html>
<head>
<title>Inline Options</title>
<style>
ul {
list-style:none;overflow:hidden;
}
ul li {
lit-style:none;
float:left;
position:relative;
}
ul li input[type="checkbox"] {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
ul li input:checked + label {
background:blue;
}
</style>
</head>
<body>
<form action="#" method="get">
<ul>
<li>
<input type="checkbox" name="aryHours[]" id="checkbox1" />
<label for="checkbox1" class="">Option 1</label>
</li>
<li>
<input type="checkbox" name="aryHours[]" id="checkbox2" />
<label for="checkbox2" class="">Option 2</label>
</li>
<li>
<input type="checkbox" name="aryHours[]" id="checkbox3" />
<label for="checkbox3" class="">Option 3</label>
</li>
</ul>
</form>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
