CSS / HTML - Styling select boxes properly

Question

I'm pretty new doing my own CSS changes and I am a little stuck on the select element. So far, I have it where I want using the following CSS:

select {
    float: left;
    border: 0 none;
    height: 46px;
    width: 240px;
    background-color: #191919;
    font-size: 14px;
    color: white;
}

The only problem, is now I'm seeing some sort of gradient and I can't seem to find anything in the CSS to get rid of it.

Below is what I'm seeing

`select` elements will only accept very limited CSS, as they're rendered by the OS, not the browser itself. You can emulate a `select` by using a styled `ul` (or `ol`), and some JavaScript; but styling the`select` element itself is near impossible to achieve reliably. Read this question for some pointers on the JavaScript approach (albeit with jQuery rather than plain JS): http://stackoverflow.com/questions/4599975/html-select-box-options-on-hover — David Thomas, Nov 20 '11 at 11:57

score 7 · Answer 1 · answered Oct 11 '12 at 07:00

7

you can use

-webkit-appearance: none;

to get rid of that gradient.

answered Oct 11 '12 at 07:00

Aarvos

71
1
2

score 1 · Accepted Answer · answered Nov 20 '11 at 12:08

You have to use Javascript to style Select, Checkbox, Radio buttons.

There is a library fancyform (required jQuery) which you can use, it can transform above items and almost fully supports textarea to have a custom scrollbar. http://lutrasoft.nl/jQuery/fancyform/ Within the source you can get the latest version. It is really easy to use:

HTML:

<select class="select">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Javascript:

$(function(){
    $(".select").transformSelect();
});

CSS (which you need to edit)

.transformSelect li
{

    position    : relative;

}

    .transformSelect li span
    {
        cursor  : pointer;  
        padding     : 3px;
        border      : 1px solid #cccccc;
        width       : 154px;            
        line-height : 15px; 
        height      : 15px;
        display     : block;
    }

        .transformSelect li span:hover
        {
            background  : #eeeeee;
        }

    .transformSelect li ul
    {
        position    : absolute;
        left        : 0;    
        top         : 22px;
        border      : 1px solid #cccccc;
        width       : 160px;
        background  : #ffffff;
    }
        .transformSelect li ul li span
        {
            border  : 0;    
            cursor  : pointer;
        }
            .transformSelect li ul li span:hover
            {
                background  : #cccccc;  
            }

The script will generate the following:

<ul>
    <li><span>Option 1</span>
        <ul>
            <li><span>Option 1</span></li>
            <li><span>Option 2</span></li>
        </ul>
    </li>
</ul>

You don't have to have your UL LI within your source code, it will be generated by the script (also supports OPTGROUP). It does have some options to show the first item or hide it, have an input with the dropdown to also have custom input, etc.

For more settings you need to check the source of the script.

CSS / HTML - Styling select boxes properly

2 Answers2

Linked