我怎样才能像表格一样设置选择选项的样式?

新手上路,请多包涵

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

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

原文由 kingcobra1986 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 257
2 个回答

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

在这个方向上,您可以做的最好的事情是将字体设置为等宽字体,并在 option 元素中使用不间断空格而不是普通空格,用于不应折叠的空格序列。 (设置 white-space: pre 在理论上可行,但在实践中行不通:浏览器会忽略它 selectoption ,因为它们是以特殊方式实现的--- (我在这里使用真正的不间断空格;您可能更喜欢 &nbsp; ,例如 JAN&nbsp;&nbsp;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 显示了两种替代方案。

原文由 Jukka K. Korpela 发布,翻译遵循 CC BY-SA 4.0 许可协议

如果您愿意使用 bootstrap-select,您可以使用 data-content 或 data-subtext 属性完成与表视图略微相似的操作(也就是说,如果您的目标是使下拉列表更具可读性)

你可以在这里找到一个漂亮的例子: https ://developer.snapappointments.com/bootstrap-select/examples/#styling

原文由 Marcin 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏