How to change colors of ChoiceFields options within the drop down menu when mouse is over

The form uses crispy forms which implements bootstrap. I tried using '!important' and specifics the widget of choicefield to have an attribute of a class which I can reference in my stylesheet:

<form id="gene_form" action ="", method="get", novalidate>               {{ gene_form|crispy }}


select_cancer = forms.ChoiceField(label = 'Cancer', choices = ExtractCancer(), required=False, widget=forms.Select(attrs={'class':'boostrap-select'})) 

my css

.boostrap-select {  background-color: black;    color: white; }

select option {   background-color: blue;   color: white; }

.boostrap select changes the color of the box but not of the options dropdown menu. How can I change this to be able to allow the user to hover over an option in the drop down and then my own css colors will take over?

I have tried referencing the class in the css and this works for the box but not for the options. I have also tried changing the css for any select option html found in the page but this hasn't worked either. I am using Django framework if that makes a difference.

Back to Top