具有水平扩展选择选项的 HTML 表单

Question

我想编写一个带有短选择字段的 HTML 表单，该表单具有以下功能:

• 所有选项都可见。这可以通过“大小”= 元素数轻松实现。
• 这些元素应明确显示在标签旁边(右侧)，就好像它们是可切换的按钮一样。

如果代码是这样的...

    <div class="row">
        <label for="myvar">Chose an option:</label>
        <select class="form-control" id="myvar" name="myvar" size="5">
            <option value="" selected="selected"></option>
            <option value="0" class="text-primary">Yes</option>
            <option value="1" class="text-warning">No</option>
            <option value="2" class="text-mutted">Sometimes</option>
        </select>
    </div>

我想要这样的东西:

选择一个选项:是 否 有时

基本上，选择选项向右水平扩展并可见。

Answer 1

您可以通过将选择显示设置为 table-row 并将选项设置为 table-cell 来达到此目的。 -webkit-appearance 属性用于根据用户的操作系统使用平台原生样式显示元素，因此我们需要禁用它并且我们的选择变得更具样式。

.row {
  display: flex;
  align-items: center;
}

select {
  display: table-row;
  border: none;
  overflow: hidden;
  outline: none;
  -webkit-appearance: none;
  table-layout: unset;
  height: 14px;
}

select option {
  display: table-cell;
}

<div class="row">
        <label for="myvar">Chose an option:</label>
        <select class="form-control" id="myvar" name="myvar" size="5">
            <option value="0" class="text-primary">Yes</option>
            <option value="1" class="text-warning">No</option>
            <option value="2" class="text-mutted">Sometimes</option>
        </select>
    </div>