Display all select option in single line
<p>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.</p>

<p>Following is my code</p>

<pre><code>.selecttodiv{
    display: inline-block;
    height: 3em;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

.selecttodiv option{
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
}


&lt;select class="selecttodiv"&gt;
   &lt;option&gt;I&lt;/option&gt;
   &lt;option&gt;II&lt;/option&gt;
   &lt;option&gt;III&lt;/option&gt;
   &lt;option&gt;IV&lt;/option&gt;
   &lt;option&gt;V&lt;/option&gt;
   &lt;option&gt;VI&lt;/option&gt;
&lt;/select&gt;     
</code></pre>

<p>following is the link to jsfiddle: <a href="https://jsfiddle.net/6yg4yhyy/" rel="nofollow">https://jsfiddle.net/6yg4yhyy/</a></p>

<p>I am able to display all option on the single line but not when selected.</p>

<p>Thanks for any help. </p>