Question

我试图旋转HTML选择框，我可以通过旋转CSS中的元素来做到这一点，但是我意识到，一旦单击该内容，它将被水平显示。

在使用多重选择框的情况下，我可以使用jQuery旋转元素，但不能在普通选择框中旋转。

有没有办法做到这一点？

$('option').css({
  "transform": "rotate(30deg)"
});

#sel1 {
  position: absolute;
  top: 100px;
  left: 100px;
  transform: rotate(20deg);
}

#sel2 {
  position: absolute;
  top: 100px;
  left: 200px;
  transform: rotate(20deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="sel1" id="sel1">
  <option class="opt" value="0">o0</option>
  <option class="opt" value="1">o1</option>
  <option class="opt" value="1">o2</option>
</select>

<select multiple name="sel2" id="sel2">
  <option class="opt" value="0">o0</option>
  <option class="opt" value="1">o1</option>
  <option class="opt" value="1">o2</option>
</select>

以下是示例 codepen

有没有一种方法可以旋转HTML选择框的内容？

0 个答案: