How can I display form with select options as horizontaly lists?

Question

It is posible by css to display a form with select as vertical lists following code ?

<form action="">
<select class="selectWidth" name="size" id="size" type="text">
<optgroup label="Standard">
    <option value="800x600" >800x600</option>
    <option value="1024x768" >1024x768</option>
    <option value="1280x960" >1280x960</option>
    <option value="1280x1024" >1280x1024</option>
    <option value="1400x1050" >1400x1050</option>
    <option value="1600x1200" >1600x1200</option>
    <option value="2560x2048" >2560x2048</option>
</optgroup>

<optgroup label="Widescreen">
    <option value="1024x600" >1024x600</option>
    <option value="1280x800" >1280x800</option>
    <option value="1366x768" >1366x768</option>
    <option value="1440x900" >1440x900</option>
    <option value="1600x900" >1600x900</option>
    <option value="1680x1050" >1680x1050</option>
    <option value="1920x1080" >1920x1080</option>
    <option value="1920x1200" >1920x1200</option>
    <option value="2560x1440" >2560x1440</option>
    <option value="2560x1600" >2560x1600</option>
 </optgroup>

 <optgroup label="Mobile">
     <option value="240x320" >240x320 (ipod)</option>
     <option value="320x480" >320x480 (iphone)</option>
     <option value="640x960" >640x960 (iphone4)</option>
     <option value="640x1136" >640x1136 (iphone5)</option>
     <option value="1024x1024" >1024x1024 (ipad)</option>
</optgroup>
</select>
</form>

I would like to be displayed like this:

Standard: 800x600 1024x768 1280x960 .....

Widescreen: 1024x600 1280x800 .... 2560x1600

Mobile : 240x320 320x480 640x960 ..... 1024x1024

Answer 1

You can:

1. Use javascript to convert the select element into a marked-up nested list; and then

2. Use CSS to display the nested list as 3 horizontal lists

Is this the kind of thing you mean:

var form = document.getElementsByTagName('form')[1];
var select = form.getElementsByTagName('select')[0];
var groups = select.getElementsByTagName('optgroup');

var labels = [];
var subLists = [];
var parentListItems = [];
var parentListItemText = [];

var parentList = document.createElement('ul');

for (var i = 0; i < groups.length; i++) {
		labels[i] = groups[i].getAttribute('label');
		parentListItems[i] = document.createElement('li');
		parentListItemText[i] = document.createTextNode(labels[i] + ': ');
		
		subLists[i] = document.createElement('ul');

		var options = groups[i].getElementsByTagName('option');

		for (var j = 0; j < options.length; j++) {
				var text = options[j].innerHTML;
				var subOption = document.createElement('li');
				var subOptionText = document.createTextNode(text);
				subLists[i].appendChild(subOption);
				subOption.appendChild(subOptionText);
		}

		parentList.appendChild(parentListItems[i]);
		parentListItems[i].appendChild(parentListItemText[i]);
		parentListItems[i].appendChild(subLists[i]);
}

form.insertBefore(parentList,select);

select.style.display = 'none';

h2 {
color: rgba(255, 0, 0 , 1);
}

hr {
margin: 48px;
}

ul, ul li {
display: block;
}

ul, li {
margin-left: 0;
padding-left: 0;
list-style: none;
font-weight: bold;
}

li ul, li ul li {
display: inline-block;
padding: 6px;
font-weight: normal;
}

<h2>Before:</h2>
<form action="">
<select class="selectWidth" name="size" id="size" type="text">
<optgroup label="Standard">
    <option value="800x600" >800x600</option>
    <option value="1024x768" >1024x768</option>
    <option value="1280x960" >1280x960</option>
    <option value="1280x1024" >1280x1024</option>
    <option value="1400x1050" >1400x1050</option>
    <option value="1600x1200" >1600x1200</option>
    <option value="2560x2048" >2560x2048</option>
</optgroup>

<optgroup label="Widescreen">
    <option value="1024x600" >1024x600</option>
    <option value="1280x800" >1280x800</option>
    <option value="1366x768" >1366x768</option>
    <option value="1440x900" >1440x900</option>
    <option value="1600x900" >1600x900</option>
    <option value="1680x1050" >1680x1050</option>
    <option value="1920x1080" >1920x1080</option>
    <option value="1920x1200" >1920x1200</option>
    <option value="2560x1440" >2560x1440</option>
    <option value="2560x1600" >2560x1600</option>
 </optgroup>

 <optgroup label="Mobile">
     <option value="240x320" >240x320 (ipod)</option>
     <option value="320x480" >320x480 (iphone)</option>
     <option value="640x960" >640x960 (iphone4)</option>
     <option value="640x1136" >640x1136 (iphone5)</option>
     <option value="1024x1024" >1024x1024 (ipad)</option>
</optgroup>
</select>
</form>

<hr />

<h2>After:</h2>
<form action="">
<select class="selectWidth" name="size" id="size" type="text">
<optgroup label="Standard">
    <option value="800x600" >800x600</option>
    <option value="1024x768" >1024x768</option>
    <option value="1280x960" >1280x960</option>
    <option value="1280x1024" >1280x1024</option>
    <option value="1400x1050" >1400x1050</option>
    <option value="1600x1200" >1600x1200</option>
    <option value="2560x2048" >2560x2048</option>
</optgroup>

<optgroup label="Widescreen">
    <option value="1024x600" >1024x600</option>
    <option value="1280x800" >1280x800</option>
    <option value="1366x768" >1366x768</option>
    <option value="1440x900" >1440x900</option>
    <option value="1600x900" >1600x900</option>
    <option value="1680x1050" >1680x1050</option>
    <option value="1920x1080" >1920x1080</option>
    <option value="1920x1200" >1920x1200</option>
    <option value="2560x1440" >2560x1440</option>
    <option value="2560x1600" >2560x1600</option>
 </optgroup>

 <optgroup label="Mobile">
     <option value="240x320" >240x320 (ipod)</option>
     <option value="320x480" >320x480 (iphone)</option>
     <option value="640x960" >640x960 (iphone4)</option>
     <option value="640x1136" >640x1136 (iphone5)</option>
     <option value="1024x1024" >1024x1024 (ipad)</option>
</optgroup>
</select>
</form>