如何设置选择选项（如表格）的样式？

Posted 2023-03-05

【中文标题】如何设置选择选项（如表格）的样式？

【英文标题】：How can I style a select option like a table?

【发布时间】：2014-11-10 20:25:48

【问题描述】：

我有一个表单选择下拉菜单，我想格式化选项的内部文本。每个选项都有月份、年份和标题。我希望每个人都彼此对齐。我尝试在选项元素内放置一个表格，看看我是否可以强制它，但它失败了。我尝试使用不间断空格，但也失败了（我相信是因为字母的字体系列样式）。 这是我的代码：

<form>
    <label>I would like to style this in a manner in which the months, years, and title are aligned with each other</label>
    <select id="news2">
        <option selected value="Click Here"></option>
        <option value="1">    JAN  2000 - Title 1     </option>
        <option value="2">    FEB  1191 - Title 2     </option>
        <option value="3">    MAR  2014 - Title 3     </option>
        <option value="4">    APR  1995 - Title 4     </option>
        <option value="5">    MAY  2034 - Title 5     </option>
        <option value="6">    JUNE 2210 - Title 6     </option>
        <option value="7">    JULY 1991 - Title 7     </option>
    </select>
</form>

我对齐了代码中的文本，以展示我希望它如何在下拉列表中对齐。我知道这种字体是等宽字体，但我使用的字体不是。我也有一个小提琴http://jsfiddle.net/n83ahz5q/ 与我的大多数问题一样，我尝试减少脚本的数量，如果可能的话，我更喜欢 html/css 解决方案。如果没有，我也可以做原生 javascript。

【问题讨论】：

The <option> element does not take any HTML elements，但只有文本。如果要实现类似表格的布局，则必须考虑使用基于 JS 的 <select> 元素替换。此外，为确保不忽略多个连续的空白字符，您可以使用 。

【参考方案1】：

您不能将select 元素格式化为表格，因为option 元素的内容是纯文本，因此您不能将其中的任何部分指定为表格单元格。

在这个方向上您可以做的最好的事情是将字体设置为等宽，并在 option 元素内使用不间断空格而不是普通空格，以用于不应折叠的空格序列。 （设置white-space: pre 理论上可行，但实际上不行：浏览器会忽略select 和option 元素，因为它们以特殊方式实现。）示例（我在这里使用真正的不间断空格；你可能更喜欢 ，例如JAN  2000）：

#news2,
#news2 option 
  font-family: Consolas, monospace;

<select id="news2">
  <option selected value="Click Here"></option>
  <option value="1"> JAN 2000 - Title 1 </option>
  <option value="2"> FEB 1191 - Title 2 </option>
  <option value="3"> MAR 2014 - Title 3 </option>
  <option value="4"> APR 1995 - Title 4 </option>
  <option value="5"> MAY 2034 - Title 5 </option>
  <option value="6"> JUNE 2210 - Title 6 </option>
  <option value="7"> JULY 1991 - Title 7 </option>
</select>

如果您始终使用三位数字的月份缩写（包括 JUN 和 JUL），则在这种情况下您实际上不需要不间断的空格。

让您使用任何字体的一种非常不同的方法是使用一组单选按钮而不是select 元素。然后，您可以将选项的部分标签放在表格单元格中。 （这会导致可访问性问题，因为从逻辑上讲，单个标签已被拆分为多个元素，因此您无法以正常方式将标签与 input 元素相关联。）示例：

<table>
  <tr>
    <td><input type="radio" name="news2" value="1"></td>
    <td>JAN</td>
    <td>2000</td>
    <td>- Title 1</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="2"></td>
    <td>FEB</td>
    <td>1191</td>
    <td>- Title 2</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="3"></td>
    <td>MAR</td>
    <td>2014</td>
    <td>- Title 3</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="4"></td>
    <td>APR</td>
    <td>1995</td>
    <td>- Title 4</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="5"></td>
    <td>MAY</td>
    <td>2034</td>
    <td>- Title 5</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="6"></td>
    <td>JUNE</td>
    <td>2210</td>
    <td>- Title 6</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="7"></td>
    <td>JULY</td>
    <td>1991</td>
    <td>- Title 7</td>
  </tr>
</table>

我的jsfiddle 显示了两种选择。

【讨论】：

@korpela 我正在尝试实现相同的东西，但我想要具有固定宽度的不同列..我不想使用任何空间...有什么办法可以这样做..

【参考方案2】：

这是不可能的。相反，您可以使用 HTML table（或 divs/ul）、CSS 和 jQuery 模拟选择。

【参考方案3】：

仅当您包含 multiple 属性以允许多个选择时，才能使用 select 元素为下拉列表设置样式。

<table>
<label>Number Selector</label>
<td>
  <select name="numbers" multiple>
    <option value="1" selected>One</option>
    <option value="2" selected>Two</option>
    <option value="3" selected>Three</option>
  </select>
</td>