IronWaffleMan IronWaffleMan - 7 months ago 9
Javascript Question

Is it possible to show all <select> <option>s as a toggle?

This is a bit of a weird request, so I haven't seen any examples for it anywhere. Basically I want to 'unfold' a

<select>
so its options are visible, basically turning it into a toggle, of sorts. Here's my original
<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>





Ideally the solution would be css-only, but I'm not sure if that's possible (I've searched but not found any examples). Here's an image of what I'd like: example.

Is this doable?
edit: added context for the
<select>
's surrounding elements.

Answer

To do this with a select box is rather..... odd. But sure it can be done. This should be enough to get you started:

.toggle{
  font-size:18px;
  height:1.25em;
  overflow:hidden;
  border-radius:5px;
}
.toggle option{
  display:inline-block;
  width:50px;
  text-align:center;
}
<select size='2' class='toggle'>
  <option value="AND" selected>AND</option>
  <option value="OR">OR</option>
</select>