CODEWITHSUNDEEP
javascripthtmlangular
Arian
Arian

Reputation: 7719

Change cursor for ng-select

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

Upvotes: 1

Views: 3152

Answers (5)

Wagner Danda da Silva Filho
Wagner Danda da Silva Filho

Reputation: 5407

This worked for me

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

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

Upvotes: 0

Arian
Arian

Reputation: 7719

What I ended up doing was:

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

Upvotes: 0

Renato Santos
Renato Santos

Reputation: 181

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;
}

Upvotes: 2

Steve
Steve

Reputation: 1943

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.

Upvotes: 2

Derek Wang
Derek Wang

Reputation: 10194

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).

Upvotes: 1

Related Questions