如何將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>元素。