Styling Or Replacing The Standard Select Element

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 basi

Solution 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.

Solution 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.

Solution 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><optgrouplabel="Server-side languages"><option>21</option><option>22</option></optgroup><optgrouplabel="Client-side languages"><option>23</option><option>25</option></optgroup></select></div>