0

I need to create a combobox with custom item's design to use in a php website.

however i can't figure out what to use since there's no way to do it by simple css (that i know of)

It should look somewhat like this:

Desired combobox design

Tobias Golbs
  • 4,586
  • 3
  • 28
  • 49
  • 1
    You can find all sorts of this here: http://cssmenumaker.com/css-drop-down-menu EDIT sorry, I wasn't looking good. – Matheno Jun 18 '13 at 09:53

2 Answers2

3

Look here to see how to stye a combobox with pure css. Just adapt the properties as you wish regarding color etc.

alex
  • 5,516
  • 2
  • 36
  • 60
  • It helped me but i need to change the item background color as i hover it(you can see in the image i posted above) – Nova Millennium Jun 18 '13 at 10:32
  • For the item background on hover use: select:hover { background-color: red; } in your css file – alex Jun 18 '13 at 11:13
  • That just changes the BG of the SELECT. I want to change the BG of the OPTION as i hover it. – Nova Millennium Jun 18 '13 at 11:16
  • 1
    Sorry, i missed that point. use select option:hover { background: #ff0000; }. Have a look at this post: http://stackoverflow.com/a/12836286/1965084 As stated here it might lead you into some problems to reliable style form control across different browsers: http://stackoverflow.com/a/1667192/1965084 – alex Jun 18 '13 at 11:25
  • Worked perfectly. however as you stated before, it doesnt work in some browsers as i was testing – Nova Millennium Jun 18 '13 at 11:35
  • 1
    Ok thats bad, if javascript is possible for you, consider using some jquery controls like this: http://www.marghoobsuleman.com/jquery-image-dropdown If my answer helped you, please mark it as solved with the check mark on the left :) – alex Jun 18 '13 at 11:41
  • i'm going to give a try to that jquery plugin. anyway, i'll solve it easily from now on, thanks – Nova Millennium Jun 18 '13 at 11:44
1

Well, it literally took me no longer than 5 seconds on Google.

Have a look at this tutorial here:

Tutorial

SDZ
  • 726
  • 2
  • 8
  • 21