How do I change the background colour and hover colour of a dropdown?

Post reply
0 favourites
  • 6 posts
From the Asset Store
Customized DropDown List
$10 USD
Project File of my C3 Tutorial Customized DropDown List
luckyrawatlucky's avatar
luckyrawatlucky

  • I have the following css 

    #wordcombooptionslist{
border: none;
font-size: 40px;
background-color: transparent;
word-wrap: break-word;
}

    The dropdown is transparent when unfocussed but when it is in focus , the background-color becomes opaque white and the hovered over option has a background colour blue.

    Is it possible to change these colours ?

    Tagged:

  • Tried the following but it isn't working 

    #wordcombooptionslist{
 

border: none;
font-size: 20px;
background-color: transparent;
word-wrap: break-word;
 
 
}




#wordcombooptionslist .dropdown-content option:hover{
 background-color: pink;
}

    Any ideas?

  • Hi. Maybe something like this: 

    	#wordcombooptionslist {
 border: none;
 font-size: 40px;
 background-color: transparent;
 word-wrap: break-word;
}

#wordcombooptionslist:focus {
 background-color: /* background color */;
}

#wordcombooptionslist option:hover {
 background-color: /* hover background color */;
}

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Thank you so much cesisco. Focus is working great but hover isn't. On Hover the colour still remains the default blue.

    So this is working great 

    #wordcombooptionslist:focus {
 background-color: /* background color */;
}

    and this isn't 

    #wordcombooptionslist option:hover {
 background-color: /* hover background color */;
}

  • I did some Googling, and it looks like it's not easy to achieve this with just CSS

  • That's true, atleast focus is working great now, thanks for that.

Post reply
  • 6 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)