How to style Drop Down list items

Question

Can you guys please tell me how to style drop down list's items? I want to give more spacing between the list items and maybe a border under each item?

<select class="text_select" id="field_14" name="field_14" style="opacity: 0;">
    <option value="- Select -">- Select -</option>
    <option value="0 - $2m">0 - $2m</option>
    <option value="$2.1 &ndash; $5m">$2.1 &ndash; $5m</option>
    <option value="$5.1 - $10m">$5.1 - $10m</option>
    <option value="$10 -$20m">$10 -$20m</option>
    <option value="Greater than $20M">Greater than $20M</option>
</select>

This is not Java related, is Javascript – Luiggi Mendoza Jul 13 '12 at 05:03 — Luiggi Mendoza, Jul 13 '12 at 05:03

score 4 · Answer 1 · answered Jul 13 '12 at 05:05

4

You can use JQUERY COMBOBOX

It is an unobtrusive replacement for the standard combobox that allows the developer/designer to style the control and the option list as well.

easy to setup, default style does not require CSS classes, animated drop-down and it still works with Forms without requiring code changes.

answered Jul 13 '12 at 05:05

vikiiii

9,246
9
49
68

can you please send me the link to downlod it – user1074803 Jul 13 '12 at 05:10
Hmm. Not quite. My form is generated in PHP and I got this code in my page. – user1074803 Jul 13 '12 at 05:26

score 1 · Answer 2 · answered Jul 13 '12 at 05:15

1

You can use this for the stylished drop down demo

answered Jul 13 '12 at 05:15

muthu

5,381
2
33
41

Parag · Accepted Answer · 2012-07-13T06:00:17.360

1

check the below jquery plugins, they might help you

edited Jul 13 '12 at 06:00

answered Jul 13 '12 at 05:54

Parag

4,754
9
33
50

score 0 · Answer 4 · edited May 23 '17 at 11:48

0

/* FIRST ANSWER */

<style>
 li {
    /* CODE HERE */
 }     
</style>

/* EDIT */

good link => How to style a <select> dropdown with CSS only without JavaScript?

edited May 23 '17 at 11:48

Community

1
1

answered Jul 13 '12 at 05:05

Cjueden

1,200
2
13
25

Hi. Thanks. Im talking about drop down list (Select) no li – user1074803 Jul 13 '12 at 05:05
A drop down list and a list is not the same thing. A drop down list is a type of input where you click on a bar and more options drop down. See http://en.wikipedia.org/wiki/Drop-down_list – DrinkJavaCodeJava Jul 13 '12 at 05:07
@redelman431 I know the difference. I thought he may be confused but gave what he asked for. – Cjueden Jul 13 '12 at 05:08
Always assume a user knows what he is talking about until he tells you that he is implying something else. If everyone misunderstands the user's question because of improper terminology, the user will recognize right it's his fault by all the improper answers he gets. – DrinkJavaCodeJava Jul 13 '12 at 05:11
@redelman431 I read as tho he had made a list and its a "drop down" like a nav bar. and wanted to know how to style that. I guess I miss read thanx – Cjueden Jul 13 '12 at 05:14
Ok. Guys this is what I got – user1074803 Jul 13 '12 at 05:23
@user1074803 Please update your question and style the information. that is hard to read. – Cjueden Jul 13 '12 at 05:36

score 0 · Answer 5 · answered Jul 13 '12 at 05:06

0

.list-item {
    margin-top:10px;
    margin-bottom:10px;
    border-bottom:1px;
}

answered Jul 13 '12 at 05:06

Guanlun

1,598
2
18
29

How to style Drop Down list items

5 Answers5