Change cursor for ng-select

Question

I want to change the cursor when user hovers over ng-select, from the regular arrow to pointer.

Currently when you hover over items it is a pointer, but when you hover over the menu itself it is still arrow.

https://stackblitz.com/edit/ng-select-eyxoxz

Answer 1

If you give this class

.ng-select .ng-select-container .ng-value-container .ng-input>input

the CSS of

cursor: pointer;

You will achieve what you want.

Answer 2

If you want to make it global just add the code below to your styles.scss

.ng-input>input {
    cursor: pointer !important;
}

Another approach, you could create a custom class like "my-custom-class" and add to your ng-select. I would recommend this approach.

Something like this:

<ng-select class="my-custom-class"...

.ng-select.my-custom-class .ng-input>input {
    cursor: pointer !important;
}

Answer 3

You can see the default pointer because on this css class .ng-select .ng-select-container .ng-value-container .ng-input > input , the cursor is set to default .

So it is needed to override this class and set cursor:pointer .

That class indicates the inputbox inside the ng-select . (auto-generated by ng-select).

Answer 4

What I ended up doing was:

.ng-select .ng-input {
   cursor: pointer;
}

Answer 5

This worked for me

.ng-select .ng-input {
  cursor: pointer !important;
}  

.ng-input>input {
  cursor: pointer !important;
}