Как заставить фокус или границу после щелчка исчезнуть в PrimeNG

#html #angular #sass #primeng

#HTML #angular #дерзость #primeng

Вопрос:

У меня есть еще одна проблема с PrimeNG. Мне нужно повернуть границу после нажатия на кнопку. Я перепробовал много способов:

 host: {
    ::ng-deep .ui-button-icon-only{
        border: none!important;
        background-color: transparent!important;
        outline: none!important;
    }
}
  

Это не работает, даже если я добавлю :focus , то же самое к .ng-star-inserted и ng-star-inserted:focus

 *:focus {
    outline: none!important;
    border: 0!important;
}
  

Этот фрагмент также не работает, создание нового scss clss с именем nofocus и добавление в button дает нулевой эффект. И там у меня есть:

фото

Я говорю об этой границе после щелчка.

Ответ №1:

вам нужно добавить box-shadow:none в элемент для исчезновения границы

 host: {
    ::ng-deep .ui-button:focus, ::ng-deep .ui-button:enabled:focus{
        box-shadow:none;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
    }
}
  

Ответ №2:

использовано ::ng-deep и добавить box-shadow:none к элементу для исчезновения границы

 ::ng-deep body .ui-button:enabled:focus {
    outline: 0 none;
    outline-offset: 0px;
    box-shadow: none  
}  

Ответ №3:

У каждого элемента есть класс .p-focus после выделения, поэтому вам следует переписать этот класс.

Например, для inputSwitch:

 .p-inputswitch.p-focus .p-inputswitch-slider {
  box-shadow: none;
}