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

2024-05-06 • 问答

我想编写一个HTML表单，其中包含一个短选择字段，该表单具有以下功能：

所有选项均可见。可以通过“大小” =项目数轻松实现。
这些项目应显示在标签旁边（在右侧），就像它们是可切换按钮一样。

如果代码是这样的...

__str__

我想要类似的东西：

选择一个选项：<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> Yes No

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

您可以通过将选择显示设置为表格行和将选项设置为表格单元格来实现。 -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>

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

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>

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

ZIer0921 回答：具有水平扩展选择选项的HTML表单

大家都在问