Angular UI - ui-select custom styling

Question

So I am using ui-select with angularjs to create a configurable directive. The functionality on the backend is almost done but our prototype has very specific styles and I need to adhere to those styles.

I would like to simply re-style the ui-select as I see fit but I can't seem to find a single tutorial online on how to do so. I have found a few examples on overriding the template that angular ui uses using $templateCache. Is there a way to simply have a css file somewhere that it uses instead of its default? Or is there a way to override the current classes without a bunch of !important tags.

Sasikumar · Accepted Answer · 2018-04-09 09:41:25Z

3

Of course, you can change the entire style of the UI-select directive by our own CSS. There is no restriction for that, take a look at sample CSS changes in the link.

.ui-select-container {
  width:  200px;
}
.ui-select-bootstrap .ui-select-choices-row.active>a {
  background: #000;
  color: #fff;
}
.ui-select-container input {
    border: none;
    border-bottom: 1px solid #ccc;
    box-shadow: none;
}

edited Apr 9, 2018 at 9:41

Sasikumar

90812 silver badges25 bronze badges

answered Apr 7, 2017 at 18:27

Srigar

1,6983 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular UI - ui-select custom styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related