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

Question

我想在选择框中放置CSS生成的内容，并用CSS旋转它。当我尝试时，它会旋转选择框和生成的内容，但生成的内容会在选择框外结束。

我该如何解决？

Jsfiddle DEMO

<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>元素。