Question

这是一个奇怪的请求，所以我没有在任何地方看到它的任何例子。基本上我想'展开'＆lt; select＆gt;所以它的选项是可见的，基本上把它变成了各种各样的切换。这是我原来的＆lt; select＆gt;：＆lt; span＆gt;＆lt; input type =“checkbox”className =“onlyCheckbox”value = {this.state.only} onChange = {this.handleOnlyChange.bind（this）} /＆gt; ＆lt; label htmlFor =“onlyIdentityBox”＆gt;仅＆lt; / label＆gt; ＆lt; select value = {this.state.operator} onChange = {this.handleOperatorChange.bind（this）}＆gt; ＆lt; option value =“AND”＆gt; AND＆lt; / option＆gt; ＆lt; option value =“OR”＆gt; OR＆lt; / option＆gt; ＆LT; /选择＆GT;＆LT; /跨度＆GT; 理想情况下，解决方案只能是css，但我不确定这是否可能（我已搜索但未找到任何示例）。这是我想要的图像：这可行吗？编辑：为＆lt; select＆gt;的周围元素添加了上下文。

Answer 1

使用选择框执行此操作相当......奇怪。但确定可以做到。这应该足以让你入门：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您可以在代码中添加一些额外的标记，那么您也可以尝试以下代码：

请检查演示文稿的小提琴。 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');
});

Answer 3

在对CodePen进行了一些修补之后我想出了这个，我添加了一些JS来添加滚动效果。

＆＃13;

var select = document.getElementById('select');

select.addEventListener('mouseup', function(e) {
  e.preventDefault();
});

select.addEventListener('mousewheel', function(e) {
  select.selectedIndex = select.selectedIndex + 1;
});

＆＃13;

select {
  overflow: hidden;
  size: 2;
  height: 18px;
}
option {
  display: inline;
}

＆＃13;

<select id="select" multiple>
  <option>1</option>
  <option>2</option>
</select>

＆＃13;

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

3 个答案: