html - 将选项文本旋转 180 度

问题描述

我正在创建一个网页以在信息亭中显示。由于某些固定问题，必须将显示器倒置固定。因此，我在页面末尾添加了一个 'transform: rotate(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>

提前致谢

标签： htmlcss

您的代码在 Chrome 中运行。请注意，您正在使用属性-webkit-transform，因此这只会在 webkit 浏览器上生效。添加额外的 JS 行以针对非 webkit 浏览器：

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

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

select顺便说一句，当它倒置时检查一下，下拉菜单仍然显示为正向上。这种方法可能从一开始就存在一些问题。

html - 将选项文本旋转 180 度

问题描述

解决方案

推荐阅读