<select> <option> 标签的显示内联 Chrome 问题答案

【问题标题】：Chrome issues with display-inline for <select> <option> tags<select> <option> 标签的显示内联 Chrome 问题
【发布时间】：2023-03-09 19:10:01
【问题描述】：

我遇到了一个问题，我无法在 Firefox 和 Chrome 上使用相同的 CSS 来呈现相同的效果。在 Firefox 中，它们不是一个包含 24 个值的垂直选择框，而是彼此相邻的一行：

在 Chrome 中，它们显示为垂直的多选框。

简短的 3 小时示例的完整代码：

<html>
  <head>
    <style type="text/css">
      option { display: inline; }
    </style>
  </head>
  <body>
    <form>
      <select id="aryHours[]" class="select_hours" size="1" multiple="multiple" name="aryHours[]">  
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </form>
  </body>
</html>

在 Chrome 中，选项不会内联显示。

任何解释为什么此代码起作用/不起作用以及是否有任何其他方法可以实现相同的布局？

【问题讨论】：

标签： css html google-chrome

【解决方案1】：

我认为您不应该（可以？）像这样将<option> 元素内联。尝试改用复选框。类似this:

<!DOCTYPE html>
<html>
 <head>
     <title>Inline Options</title>
     <style>
         ul {
             list-style:none;overflow:hidden;
         }
         ul li {
             lit-style:none;
             float:left;
             position:relative;
         }
         ul li input[type="checkbox"] {
             position:absolute;
             top:0;
             right:0;
             bottom:0;
             left:0;
             width:100%;
             height:100%;
             opacity:0;
         }
         ul li input:checked + label {
             background:blue;
         }
     </style>
 </head>
 <body>
     <form action="#" method="get">
         <ul>
             <li>
                 <input type="checkbox" name="aryHours[]" id="checkbox1" />
                 <label for="checkbox1" class="">Option 1</label>
             </li>
             <li>
                 <input type="checkbox" name="aryHours[]" id="checkbox2" />
                 <label for="checkbox2" class="">Option 2</label>
             </li>
             <li>
                 <input type="checkbox" name="aryHours[]" id="checkbox3" />
                 <label for="checkbox3" class="">Option 3</label>
             </li>
         </ul>
     </form>
 </body>
</html>

【讨论】：

感谢您的回复。我不同意选项不能内联 - 在 FireFox 中尝试我的代码。也就是说，这种方法很聪明，并且具有正确的基本功能。但是，我认为有几个功能差异很重要。由于这是一个多选，用户可以按住 shift 并拖动所需的时间。在此示例中，用户必须单独选择每个小时。在我的实际应用程序中，有 24 个选项，而不是 3 个。必须点击多达 24 次对用户不友好。
@dsh - 非常正确，但只是因为一个（甚至多个）浏览器可以让你侥幸逃脱并不意味着你应该这样做。我不确定规范会说什么，但我认为 Firefox 允许它是可疑的事实 - 我的意思是 <select> 是更难设置样式和自定义的控件之一。根据我的经验，字体和颜色之外的任何东西，你都可能诉诸黑客攻击。
我认为你是对的，显示属性从不用于选项。我使用您的代码来模拟我正在尝试做的事情，并添加了一些 javaScript 以使其表现得更像一个复选框。谢谢。
如果在 iphone 上查看会发生什么？

【解决方案2】：

Firefox 的行为可能是由于错误

https://bugzilla.mozilla.org/show_bug.cgi?id=1271482

如前所述，尽量避免在选项上使用内联

【讨论】：