Esta es una solicitud un poco extraña, por lo que no he visto ningún ejemplo en ninguna parte. Básicamente quiero 'desplegar' un <select> para que sus opciones sean visibles, básicamente convirtiéndolo en una especie de alternar. Aquí está mi <select> original:

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

Idealmente, la solución sería solo css, pero no estoy seguro de si eso es posible (he buscado pero no he encontrado ningún ejemplo). Aquí hay una imagen de lo que me gustaría: ejemplo

¿Es esto factible? editar: contexto agregado para los elementos circundantes de <select>.

0
IronWaffleMan 10 may. 2016 a las 07:29

3 respuestas

La mejor respuesta

Hacer esto con un cuadro de selección es bastante ..... extraño. Pero seguro que se puede hacer. Esto debería ser suficiente para comenzar:

.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>
3
trex005 10 may. 2016 a las 06:41

Después de algunos retoques en CodePen se me ocurrió esto, agregué algunos JS para agregar el efecto de desplazamiento.

var select = document.getElementById('select');

select.addEventListener('mouseup', function(e) {
  e.preventDefault();
});

select.addEventListener('mousewheel', function(e) {
  select.selectedIndex = select.selectedIndex + 1;
});
select {
  overflow: hidden;
  size: 2;
  height: 18px;
}
option {
  display: inline;
}
<select id="select" multiple>
  <option>1</option>
  <option>2</option>
</select>
0
David Archibald 16 nov. 2016 a las 06:09

Si puede agregar un marcado adicional a su código, también puede probar el siguiente código:

Por favor revise el violín para Demo. Fiddle Link

HTML

<select  id="select-box">
      <option value="AND" selected>AND</option>
      <option value="OR">OR</option>
</select>

<div class="toggle-effect">
   <label class="and">AND</label>
   <label class="or">OR</label>
</div>

CSS

select {
  margin-bottom: 40px;
}

.and {
  border: 1px solid black;
  background:red;
  color: white;
}

.or {
  border: 1px solid black;
  background:blue;
  color: white;
}

JS

$('.toggle-effect').on('click', '.and,.or', function(){
   var textInLabel = $(this).text();
   $('#select-box').val(textInLabel);
   $('#select-box').trigger('change');
});
1
Mohit Raj Purohit 10 may. 2016 a las 05:01