这有点奇怪的要求,所以我在任何地方都没有看到任何示例。基本上,我想“展开” <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>
的周围元素添加上下文。 最佳答案
用选择框来做到这一点相当.....奇怪。但是确定可以做到。这应该足以让您入门:
.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>