Question

我正在创建一个要在信息亭中显示的网页。由于某些固定问题，显示器必须上下颠倒固定。因此，我在页面末尾添加了一个'transform：rotation（180deg）样式。一切皆好。但是，我的选择元素的下拉框中的选项仍显示为直线。如何使下拉框中的文本也可以上下显示。代码的相关部分如下：

<!DOCTYPE html>
<html lang="en">

<head>
<style type="text/css">
  option {
    background-color: dodgerblue;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
</style>
</head>

<body>
<h1>Select Demo</h1>
<select>
  <option>Volvo</option>
  <option>Toyota</option>
  <option>Mercedez</option>
  <option>BMW</option>
</select>
</body>
<script type="text/javascript">
  document.body.setAttribute( "style", "-webkit-transform: rotate(180deg);"); 
</script>
</html>

预先感谢

Answer 1

您的代码可在Chrome中使用。请注意，您正在使用属性-webkit-transform，因此这只会在webkit浏览器上生效。向非Webkit浏览器添加JS附加行：

<script type="text/javascript">
  document.body.setAttribute( "style", "-webkit-transform: rotate(180deg);"); 
  document.body.setAttribute( "style", "transform: rotate(180deg);"); 
</script>

顺便说一句，我不建议定位body元素，而是在正文中添加包装器div，将所有内容放入其中，然后使用脚本定位包装器。

顺便说一句，将select倒置后，仍然可以看到下拉菜单。这种方法从一开始就可能存在一些问题。

将选项文字旋转180度

1 个答案: