如何在选择中内联选项标签并使用 optgroup 划分它们

实际问题是在选择块中以水平方式使用选项标签并使用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/

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

不确定我遵循了您想做的事情，但也许像这样更简单的事情是一样的？

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

因此，作为一个"肮脏"的解决方案，对于那些也有这种要求并使用数据表的人来说，您可以使用我问题中的解决方案。我真的明白这不是那么优雅的方式，所以欢迎提出建议=）

相关内容

最新更新

热门标签：