CODEWITHSUNDEEP
angular-ngselect
Michael JDI
Michael JDI

Reputation: 1251

ng-select angular 5 change background color on hover for items in the option list

I am trying to change the background color of the item in the option list on :hover. I notice that there is a marked class that gets added to the div tag on hover.

I have this in my angular component that is using the ng-select component:

 ng-select {
    .ng-option {
      .marked {
        background-color: red;
      }
    }
  }

It is not working. What is the best way to handle changing the background color on hover for ng-select

Upvotes: 3

Views: 14090

Answers (3)

Gabriel Arghire
Gabriel Arghire

Reputation: 2360

.ng-dropdown-panel {
  .ng-option {
    &.ng-option-marked {
      background-color: red !important;

      &:hover {
        background-color: blue !important;
      }
    }
  }
}

You might also want to style the chosen option.

.ng-dropdown-panel {
  .ng-option {
    &.ng-option-selected {
      background-color: green !important;

      &:hover {
        background-color: purple !important;
      }
    }
  }
}

Upvotes: 0

aspergillusOryzae
aspergillusOryzae

Reputation: 756

In your css/scss file:

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
    background-color: red;
}

Don't forget to import the ng-select styles in your style.scss.

// Import ng-select component styles
@import "~@ng-select/ng-select/themes/default.theme.css";

If you want the dropdown button color to change on hover use:

.ng-select .ng-select-container:hover{
    background-color: yellow;
}

Upvotes: 4

Terence Fernandes
Terence Fernandes

Reputation: 19

I used scss I converted the css from ng-select to scss and then imported the scss files and made changes wherever I had to. Hope this helps.

Upvotes: -1

Related Questions