这有点奇怪的要求,所以我在任何地方都没有看到任何示例。基本上,我想“展开” <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,但我不确定是否可行(我已经搜索过但未找到任何示例)。这是我想要的图像:javascript - 是否可以显示所有&lt;select&gt; &lt;option&gt;作为切换?-LMLPHP

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

最佳答案

用选择框来做到这一点相当.....奇怪。但是确定可以做到。这应该足以让您入门:



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

07-24 09:44
查看更多