javascript - 是否可以将所有 <select> <option> 显示为切换？

Question

这是一个有点奇怪的请求，所以我在任何地方都没有看到任何例子。基本上我想“展开”一个 <select>所以它的选项是可见的，基本上把它变成了一个开关。这是我的原创 <select> :

        <span><input type="checkbox" className="onlyCheckbox" value={this.state.only} 
    onChange={this.handleOnlyChange.bind(this)} />
                              <label htmlFor="onlyIdentityBox">Only</label>
    <select value={this.state.operator} onChange={this.handleOperatorChange.bind(this)} >
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                  </select></span>

理想情况下，解决方案应该是纯 css，但我不确定这是否可行(我搜索过但没有找到任何示例)。这是我想要的图片:

这可行吗？ 编辑:为 <select> 添加了上下文的周围元素。

Answer 1

用一个选择框来做这个是相当.....奇怪的。但肯定可以做到。这应该足以让您开始:

.toggle{
  font-size:18px;
  height:1.4em;
  overflow:hidden;
  border:1px solid black;
  border-radius:5px;
  padding:0px;
  box-sizing:border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.toggle option{
  display:inline-block;
  float:left;
  width:50%;
  min-width:50px;
  height:100%;
  text-align:center;
  box-sizing:border-box;
}

<select size='2' class='toggle'>
  <option value="AND" selected>AND</option>
  <option value="OR">OR</option>
</select>