Question

I have standard select list – https://i.stack.imgur.com/qm4bj.jpg

I need to make it beautiful

Beautiful select made using Bootstrap framework.

Here is html:

.field select{
    width:300px;
    font-size: 14px;
    border: 1px solid rgba(98,141, 40, 0.5);
    border-radius:5px;
    -moz-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
    -webkit-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
    box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);  
}

Box-shadow isn’t adding, I want to style view of option’s list.

How I can change arrow?

How I can make it looking good? Should I do this using CSS or jQuery?

Answer 1

There are a lot of jQuery plugins you can use, just google for “select plugin jquery”.

One of my fav. is DropKick.