Question

我想把CSS生成的内容放在选择框中，然后用CSS旋转它。当我尝试时，它会旋转选择框和生成的内容，但生成的内容最终会在选择框之外。

我该如何解决？

<div class="styled-select">
    <select>
        <option>Here is the first option</option>
        <option>The second option</option>
    </select>
</div>
.styled-select select {   
   padding: 5px;
   border: 1px solid #ccc;
   font-size: 16px;
   height: 34px;
   -webkit-appearance: none;
   margin: 100px;

/*following here

    content: "»";

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    */
}
.styled-select select:after {
    content: "»";
    display: block;
    writing-mode: tb-rl;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    position: absolute;
    bottom: 9px;
    font-size: 24px;

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 1

我认为您不能将生成的内容放在 <select>元素中。表单控件通常由操作系统而不是浏览器呈现，或者至少不以与其他HTML元素相同的方式呈现（因为它们比CSS本身更复杂）。

如果你想要大量定制的<select>元素，你将不得不自己用其他HTML元素和JavaScript构建它们 - 但我不会建议，因为这是很多工作，而你将需要应用正确的ARIA属性，使其在理论上可以访问。

你可能不得不接受我们所讨论的相同<select>元素。

如何将CSS内容放在选择框中并旋转它？

1 个答案: