Search code examples
ng-tags-input

How to change the border color of ngTagsInput with/without focus?

Given this HTML that declares the tags-input directive:

<tags-input class="bootstrap" ng-model="selected">
    <auto-complete source="getList($query)"></auto-complete>
</tags-input>

This CSS doesn't change the border to blue:

.bootstrap .tags {
  border: 1px solid blue;
}

This CSS doesn't change the border to red when ngTagsInput gets the focus

.bootstrap .tags:focused {
  border-color: red;
}
Solution

  • If you see the HTML when tags-input is in focus, it applies a focused class when the input is focused. We can utilize that class to override our CSS.

    I put the following CSS and it works for me:

    .bootstrap .tags{
    border: 2px solid blue;
}
.bootstrap .tags.focused {
    border: 2px solid red;
}

    And, what you tried to do in question (:focused) is not a pseudo-class, :focus is! :)

    Here's the sample working plunker