How can I change the cursor in the dropdown portion of a select?

user_2514119 0
Viewed 775

I have a dropdown that looks like this:

<select style="width: 125px; cursor: pointer;">
  <option>AAAA</option>
  <option>BBBB</option>
  <option>CCCC</option>
</select>

The cursor starts out as a pointer. However, the cursor switches to a default arrow in the dropdown. How can I make it use a pointer too?

Thank you!

css html
3 Answers

Style the cursor on hover for example

select:hover, option:hover {
cursor: pointer;
}
user_115647600

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 , , and elements.

user_112300620

As mentioned by Salil Rajkarnikar You may add pointer to tag.

<select style="width: 125px; cursor: pointer;">
    <option style="cursor: pointer;">AAAA</option>
    <option style="cursor: pointer;">BBBB</option>
    <option style="cursor: pointer;">CCCC</option> 
</select>

or

<style>
   select,option{
   cursor: pointer;
   } 
</style>

<select style="width: 125px">
   <option>AAAA</option>
   <option>BBBB</option>
   <option>CCCC</option> 
</select>
user_123182170
Related