Display all select option in single line - html

Question

By default only one selected or the default option is displayed in the select box however I want that all the select option to be displayed on the same line and among them the selected option must be highlighted.
Following is my code
.selecttodiv{
display: inline-block;
height: 3em;
-webkit-appearance: none;
-moz-appearance: none;
}
.selecttodiv option{
display: inline-block;
width: 2.5em;
height: 2.5em;
}
<select class="selecttodiv">
<option>I</option>
<option>II</option>
<option>III</option>
<option>IV</option>
<option>V</option>
<option>VI</option>
</select>
following is the link to jsfiddle: https://jsfiddle.net/6yg4yhyy/
I am able to display all option on the single line but not when selected.
Thanks for any help.

Answer 1

You can try using size attribute on select and floating option.
On Chrome and FF it was displayed properly. IE (11) doesn't work.
JSFiddle
Maybe it's better to use some select plugin where you can style it as you want..

Answer 2

Don't style default form elements. It will cause more issues than you think. Better use some extension that provides stylable html wrapper.
E.g. select2, chosen
$(document).ready(function() {
$('.selecttodiv').select2({
width: '190px'
});
})
.select2-results li {
display: inline-block !important;
width: 30px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<select class="selecttodiv" multiple="multiple">
<option>I</option>
<option>II</option>
<option>III</option>
<option>IV</option>
<option>V</option>
<option>VI</option>
</select>
Update
Also it may be checkboxes:
.check {
display: inline-block;
}
span {
width: 20px;
height: 20px;
display: block;
color: black;
font-weight: bold;
cursor: pointer;
text-align: center;
}
input {
display: none;
}
input:checked + span {
background-color: blue;
color: white;
}
<label class="check">
<input type="checkbox" />
<span>I</span>
</label>
<label class="check">
<input type="checkbox" />
<span>II</span>
</label>
<label class="check">
<input type="checkbox" />
<span>III</span>
</label>
<label class="check">
<input type="checkbox" />
<span>IV</span>
</label>
<label class="check">
<input type="checkbox" />
<span>V</span>
</label>
<label class="check">
<input type="checkbox" />
<span>VI</span>
</label>