/    Sign up×
Community /Pin to ProfileBookmark

Hover color for dropdown options list

I have been going crazy trying to workout how to change the hover color for a dropdown menu.
I am using Elementor Pro on WordPress. I have a search and filter function added by shortcode to a page.
I’ve been able to apply custom css to style the button and dropdown font size, but for the life of me I can’t change the hover background color for the options on the dropdown.
It is probably quite simple, but the solution escapes me.
Here is the HTML for the dropdown list –

<select name=”ofcategory” id=”ofcategory” class=”postform”>
<option value=”0″ selected=”selected”>Filter by speciality</option>
<option class=”level-0″ value=”153″>Article&nbsp;&nbsp;(2)</option>
<option class=”level-0″ value=”137″>Cosmetic Dentistry&nbsp;&nbsp;(21)</option>
<option class=”level-0″ value=”141″>Dental Hygiene&nbsp;&nbsp;(1)</option>
<option class=”level-0″ value=”149″>Dental Hygienist&nbsp;&nbsp;(1)</option>
<option class=”level-0″ value=”148″>Dental Therapist&nbsp;&nbsp;(1)</option>
<option class=”level-0″ value=”101″>Financial Management&nbsp;&nbsp;(1)</option>
<option class=”level-0″ value=”76″>Non-Scientific&nbsp;&nbsp;(4)</option>
<option class=”level-0″ value=”77″>Orthodontics&nbsp;&nbsp;(9)</option>
<option class=”level-0″ value=”135″>Pain Management&nbsp;&nbsp;(2)</option>
<option class=”level-0″ value=”83″>Pathology&nbsp;&nbsp;(1)</option>
<option class=”level-0″ value=”82″>Periodontics&nbsp;&nbsp;(1)</option>
<option class=”level-0″ value=”140″>Productivity&nbsp;&nbsp;(1)</option>
<option class=”level-0″ value=”81″>Prosthodontics&nbsp;&nbsp;(23)</option>
<option class=”level-0″ value=”138″>Root Caries&nbsp;&nbsp;(1)</option>
<option class=”level-0″ value=”75″>Scientific&nbsp;&nbsp;(60)</option>
<option class=”level-0″ value=”139″>Technology&nbsp;&nbsp;(2)</option>
<option class=”level-0″ value=”136″>TM Disorders&nbsp;&nbsp;(3)</option>
</select>
<input type=”hidden” name=”ofcategory_operator” value=”and”

I am wanting the hover background color to be #20becf.

Any help will be greatly appreciated.

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@cootheadAug 22.2019 — Hi there WendyC,

and a warm welcome to these forums.

>[color=#069]"Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including <select>, **[color=red]<option>[/color]**, <optgroup> and <datalist> elements. The file picker widget is also known not to be stylable at all. The new <progress> and <meter> elements also fall in this category.

The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you'll be able to style. We explore how to do this in the article How to build custom form widgets."

[/color]


**Source:-**

[url=https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms][color=#069]**MDN** - Styling HTML forms[/color][/url]

_coothead_
Copy linkTweet thisAlerts:
@WendyCauthorAug 23.2019 — Thanks fro rescuing my sanity **_coothead_**.

Disappointed that it can't be done with CSS, but happy to know that my skills aren't the reason.
Copy linkTweet thisAlerts:
@cootheadAug 23.2019 — No problem, you're very welcome. ;)


[i]coothead[/i]
×

Success!

Help @WendyC spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...