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

Answer 1

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.