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

【问题标题】：HTML form with horizontally expanded select options具有水平扩展选择选项的 HTML 表单
【发布时间】：2019-11-15 19:45:22
【问题描述】：

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

所有选项都可见。这可以通过 "size" = 项目数轻松实现。
这些项目应明确显示在标签旁边（右侧），就好像它们是可切换按钮一样。

如果代码是这样的......

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

我想要类似的东西：

选择一个选项：YesNoSometimes

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

【问题讨论】：

第一个<option>标签没有关闭
为什么不使用单选框列表而不是选择？控件可以轻松隐藏
Horizontally align options in select?的可能重复
@fcalderan：这也是个好主意……
@JulenLarrucea 我准备了一个演示。如果您有兴趣，我可以将其发布为答案。

标签： html css forms

【解决方案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>

【讨论】：

也许一些关于为什么这会解决问题的上下文会有所帮助？
有一个错字，是option 不是options
@Satif 请编辑您的答案并解释您的代码如何解决 OP 的问题。 cmets 中指向其他人答案的链接不是正确的方法。

【解决方案2】：

我建议不要使用选择，而是使用单选框列表例如

ul {
  display         : flex;
  justify-content : center;
  margin          : 50px auto;
  font            : 1.5rem Arial;
  color           : #335;
  list-style      : none;
  padding         : 0;
}

li:not(:first-child) {
  margin-left: 1.5em;
}

input {
  position : absolute;
  clip     : rect(0 0 0 0);
  width    : 1px;
  height   : 1px;
}

label {
  display: inline-block;
  padding: .3em .75em;
  background: #9bc;
  color: #556; 
  cursor: pointer;
  transition: all .5s 0s;
  border-radius: 5px;
}

:checked +  label {
  background: #556;
  color: #fff;
  cursor: default;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #556;
}

<ul>
     <li>
       <input type="radio" name="choice" value="0" id="choice--yes"/>
       <label for="choice--yes">Yes</label>
     </li>
     <li>
       <input type="radio" name="choice" value="1" id="choice--no"/>
       <label for="choice--no">No</label>
     </li>
     <li>
       <input type="radio" name="choice" value="2" id="choice--sometimes"/>
       <label for="choice--sometimes">Sometimes</label>
     </li>
</ul>

【讨论】：