Question

实际的问题是在选择块中以水平方式使用选项标签，并使用optgroup划分选项值。

所以预期结果将是：

Showing elements on the page 10 | 20 | 30，其中10,20,30是可选的，表格将显示所选元素的数量

我来到的解决方案是：

HTML：

<div class="styled-select">
   <select size="3">
       <optgroup label="|">
           <option value="10">10</option>
       </optgroup>
       <optgroup label="|">
           <option value="20">20</option>
       </optgroup>
       <optgroup label="|">
           <option value="30">30</option>
       </optgroup>
   </select>
</div>

CSS：

.styled-select {
  display:inline-block;
  overflow:hidden;
  margin-top:30px;
  overflow-x:hidden;
  height:25px;
}

.styled-select select {
  margin: -1px -20px -5px -5px;

}

optgroup {
  position:relative;
  display:inline-block;
  width:32px;
  padding-left:5px;
  padding-right: 0px;
}

optgroup:nth-child(1) {
  visibility:hidden;
}

.styled-select select option{
  visibility:visible;
  position:absolute;
  display:inline-block;
  width:15px;
  margin-left:12px !important;
  padding-top:-10px !important;
  margin-top:-16px !important;
  text-align: center;

}

.styled-select select option::before{
  content: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 0 0 0;
}

您可以在这里看到结果：https://jsfiddle.net/834gwtz7/4/

如果您有任何建议，如何以更优雅的方式进行操作，请帮忙！

Answer 1

不确定我遵循了您想做的事情，但是也许更简单的东西可以像这样工作？

<!DOCTYPE html>
<html>
<body>
<style>
#styled-select select optgroup {
  display:inline-block;
}
</style>
<div id="styled-select">
   <select size="3">
       <optgroup label="option1">
           <option value="10">10</option>
           <option value="10">10</option>
       </optgroup>
       <optgroup label="option2">
           <option value="20">20</option>
           <option value="10">10</option>
       </optgroup>
       <optgroup label="option3">
           <option value="30">30</option>
           <option value="10">10</option>
       </optgroup>
   </select>
</div>

</body>
</html>

Answer 2

因此，作为“肮脏”的解决方案，对于那些也有这种要求并使用数据表的人，可以使用我的问题中的解决方案。我确实了解这样做不是那么优雅，所以欢迎提出建议=）

如何在选择中内嵌选项标签并使用optgroup对其进行划分？

2 个答案: