Styling or Replacing the Standard Select Element

Question

I've done a lot of searching and can't seem to find the answer to what I thought might be a fairly straight forward question.

I want to style a select on my page so that it is basically a green square with the selected number (1 - 20) shown in white in the middle.

Here is what I have so far:

select
{
    width: 1.2em;
    height: 1.5em;
    background-color: #3CB23C;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 0.06em outset #666;

    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 4em;
}

It looks fine so far but I cannot find anything on how to remove the arrow in order to make this look like a plain box with the number in.

(And before I get a thousand replies on why I shouldn't do this... I know . I have read them all before!! I'm not asking you to tell me if I should I'm asking how I do ! It is for a mobile app where a number will be selected by tapping the green box and then choosing the number from the resulting list. It will be obvious what the box does so there is no need to get into an accessibility conversation here please).

I have read a lot about not being able to style selects and other form elements very easily and I have also read a lot of answers that go something like:

"You can't style the control it's self, but using JavaScript you can hide it and create a JavaScript functional control to act like a drop down list. When an item is selected it selects the item in the drop down list."

but then surprisingly few examples.

So does anyone have a way pf styling the arrow so that it 'disappears' or if it is not possible to use simply CSS to remove the arrow then does any one have any good examples of how to replicate this effect with Javascript?

Thank You

Answer 1

In wekbit browsers, you can use:

select {
  -webkit-appearance: none;
}

It doesn't work in ie or firefox, even with -moz-appearance: none; or appearance: none;

jsFiddle

---

But IMHO, it is better to do this way: style customized elements and animate them with jQuery. Then add a hidden select that is filled with jQuery with the elements above. It is a bit longer, but this way you won't have so much browsers compatibility problems.

Answer 2

@pinouchon's answer is correct for how to remove the arrow. And if you're OK with the default styling for the part that drops down, you can save yourself a whole ton of work (keyboard usage, accessibility concerns, cross-platform behavior, mousedown-vs.-click-vs.click and hold, ...).

But, while you can use -webkit-appearance / -moz-appearance to override the style for the part that is initially displayed, there doesn't seem to be any way to restyle the part that drops down. In that case, you'll need to go the route of creating a fake select menu with JavaScript and inserted HTML elements, and hoping you cover all the abovementioned use cases.

An example of this latter approach that our team has begun using is Felix Nagel's selectmenu jQuery UI plugin .

Answer 3

here is little tip how you might do it. idea is to hide arroes with owerflow:hidden; div.

<style>
div{
    float:left;
    width:90px;
    height:100px;
    overflow:hidden;
}
select
{
    float:left;
    width: 3.2em;
    height: 1.5em;
    background-color: #3CB23C;
    margin-left:-8px;

    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 4em;
}
</style>
<div>
    <select>
        <optgroup label="Server-side languages">
        <option>21</option>
        <option>22</option>
        </optgroup>
        <optgroup label="Client-side languages">
        <option>23</option>
        <option>25</option>
        </optgroup>
    </select>
</div>