Question

默认情况下，只有一个选中或默认选项显示在选择框中，但我希望所有选项都显示在同一行中，其中必须突出显示所选选项。

以下是我的代码

.selecttodiv{
    display: inline-block;
    height: 3em;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

.selecttodiv option{
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
}


<select class="selecttodiv">
   <option>I</option>
   <option>II</option>
   <option>III</option>
   <option>IV</option>
   <option>V</option>
   <option>VI</option>
</select>

以下是jsfiddle的链接：https://jsfiddle.net/6yg4yhyy/

我可以在单行上显示所有选项，但在选中时则不能。

感谢您的帮助。

Answer 1

不要设置默认表单元素的样式。它会导致比你想象的更多的问题。最好使用一些提供可设置样式的html包装器的扩展。

E.g。 select2，chosen

$(document).ready(function() {
  $('.selecttodiv').select2({
    width: '190px'
  });
})

.select2-results li {
  display: inline-block !important;
  width: 30px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>

<select class="selecttodiv" multiple="multiple">
  <option>I</option>
  <option>II</option>
  <option>III</option>
  <option>IV</option>
  <option>V</option>
  <option>VI</option>
</select>

<强>更新

也可能是复选框：

.check {
  display: inline-block;
}
span {
  width: 20px;
  height: 20px;
  display: block;
  color: black;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
input {
  display: none;
}
input:checked + span {
  background-color: blue;
  color: white;
}

<label class="check">
  <input type="checkbox" />
  <span>I</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>II</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>III</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>IV</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>V</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>VI</span>
</label>

Answer 2

您可以尝试使用size上的select属性和浮动option。在Chrome和FF上，它显示正常。 IE（11）不起作用。 JSFiddle

也许最好使用一些精选插件，你可以根据需要设计它。

单行显示所有选择选项

2 个答案: