Как поместить 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> элементами, с которыми мы все путаемся.