Styles

Styles

This component does not provide any option to customize its visual appearance.

You can do it using just plain old CSS. There is no rocket science on it, just override the default styles with your owns.

However if you are using SASS or LESS there is a more advanced method you can use to customize the styles without overriding them.

Ember Power Select exposes 28 variables you can set before importing the styles. By example (sass example):

// In your app.scss
$ember-power-select-border-color: #64A5ED;
$ember-power-select-border-radius: 0;

@import 'ember-power-select';

Will make your selects to have pale blue borders with no rounded corners.

This approach is powerful enough to build entire themes on top of it and to prove it Ember Power Select ships with a Bootstrap theme and a Material theme out of the box that can also be used in projects not using any preprocessor.

You can find the entire list of available variables in the source code.