Menu
Is there any way to change the cursor when hovering over an item in a <select> combobox? I assumed that doing option { cursor: pointer; } in CSS would work, but it doesn't seem to.
874
The default cursor for a hyperlink is "pointer". To change it, you need to specify the cursor type for your <a> element with the CSS :hover selector.
You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.
Step 1: In the Windows search box, search for "ease of access" and select Ease of access mouse settings from the resulting list. Step 2: In the left-side menu, select Mouse pointer. Step 3: Under Change pointer size, you can adjust the bar to a size that works best for you.
<option> tags are rendered by the operating system, not the browser, so you can't style them.
Instead, make your own dropdown that you can fully control or use a 3rd-party plugin, for example Bootstrap's Dropdown.
MSDN says it best:
Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing select element as a whole.
MDN also chimes in
Some elements simply can't be styled using CSS. These include all advanced user interface widgets such as range, color, or date controls as well as all the dropdown widgets, including
<select>,<option>,<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.
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
