How to make beautiful select lists?

Question

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

I need to make it beautiful

enter image description here

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?

Most likely you have missed `beautiful="on"` attribute for your ` — zerkms, Jul 05 '12 at 10:15

score 1 · Answer 1 · answered Jul 05 '12 at 10:19

1

Why not use http://harvesthq.github.com/chosen/ and just change your css to suit you

answered Jul 05 '12 at 10:19

Thanks, but previous variant is more beatiful for me. – Denys Medynskyi Jul 05 '12 at 10:28

score 0 · Accepted Answer · answered Jul 05 '12 at 10:19

0

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

One of my fav. is DropKick.

answered Jul 05 '12 at 10:19

napolux

15,574
9
51
70

Can you help if I will have some troubles with including this ? – Denys Medynskyi Jul 05 '12 at 10:22
I tried it, but failed to include, because of Rails troubles... – Denys Medynskyi Jul 05 '12 at 10:33
I'm not a Rails developer, I'm sorry but I can't help. I think you should figure out how to include the js scripts in the templates for your app. – napolux Jul 06 '12 at 10:49
I figured my problem. I included jQuery twice. – Denys Medynskyi Jul 06 '12 at 10:52
can you help with this -> http://stackoverflow.com/questions/11357289/cant-change-dk-toggle-width-from-dropkick-plugin – Denys Medynskyi Jul 06 '12 at 10:54

How to make beautiful select lists?

2 Answers2