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 theselect 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): stackoverflow.com/questions/4599975/… — David Thomas
– David Thomas, Commented Nov 20, 2011 at 11:57

Aarvos · Accepted Answer · 2012-10-11 07:00:42Z

7

you can use

-webkit-appearance: none;

to get rid of that gradient.

answered Oct 11, 2012 at 7:00

Aarvos

711 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niels · Accepted Answer · 2011-11-20 12:08:44Z

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.

Collectives™ on Stack Overflow

CSS / HTML - Styling select boxes properly

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related