如何将带有 select 选项的表单显示为水平列表？

Question

可以通过 css 将带有 select 的表单显示为代码后的垂直列表？

<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>

我希望这样显示：

标准：800x600 1024x768 1280x960 .....

宽屏：1024x600 1280x800 .... 2560x1600

手机：240x320 320x480 640x960 ..... 1024x1024

Answer 1

您可以：

使用javascript将select元素转换为带标记的嵌套列表；然后
使用CSS将嵌套列表显示为 3 个水平列表

这就是你的意思吗:

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>

如何将带有 select 选项的表单显示为水平列表？

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

css

forms

select

optgroup