[Vuejs]-Bootstrap vue (b-form-rating) shows blue outline when clicked in chrome browser

Looks like it’s triggered by a :focus pseudo-class CSS rule.

You can should be able to disable them by setting them to inherit !important.

For example:

.form-control:focus {
   border-color: inherit !important!;
   box-shadow: inherit !important;
}

Try to use border-color with transparent value, unset the box-shadow and avoid to use !important

.form-control:focus {
  border-color: transparent;
  box-shadow: none;
}

This should do the trick

How about using the no-border prop ?

<b-form-rating ... no-border ...>

doc: https://bootstrap-vue.org/docs/components/form-rating#borderless