Question

I want put CSS generated content in select box, and rotate it with CSS. When I try, it rotates the select box and the generated content, but the generated content ends up outside the select box.

How can I fix it?

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

I don’t think you can put generated content inside a <select> element. Form controls are generally rendered by the operating system rather than the browser, or at least aren’t rendered in the same way as other HTML elements (because they’re more complex than CSS can describe on its own).

If you want heavily customised <select> elements, you’re going to have to build them yourself out of other HTML elements and JavaScript — but I wouldn’t advise that, as it’s a lot of work, and you’ll need to apply the correct ARIA attributes to make it even theoretically accessible.

You might have to settle for the same <select> elements we all muddle through with.