Блог

Главная - Вопросы по программированию - Удалить черную рамку вокруг svgIcon

Удалить черную рамку вокруг svgIcon

#html #css #svg #angular-material

#HTML #css #svg #angular-материал

Вопрос:

У меня есть search_icon кнопка в моем HTML, и она работает, но я не могу понять, как удалить черный прямоугольник вокруг значка. Я пробовал outline: none; и border: none; , но, похоже, ничего не удаляет его.

введите описание изображения здесь

Вот html:

 <button id="search-button" [disabled]="!(isOnline$ | async)" 
        (click)="onExpandFilter()"><mat-icon class="search-icon" svgIcon="search_icon"></mat-icon>
        </button>

Вот css:

 .search-icon {
  width: 40px;
  height: 40px;
  padding: 12px;
  border-radius: 3px;
  box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
}

Есть предложения?

Комментарии:

1. давайте перейдем к родительскому коду?

Ответ №1:

Удалить box-shadow свойство из класса .search-icon 

 .search-icon { width: 40px; height: 40px; padding: 12px; border-radius: 3px;}

Ответ №2:

Вполне вероятно, что граница находится на внешнем button элементе, а не на SVG / icon. На основе вашего примера:

 <button id="search-button" [disabled]="!(isOnline$ | async)" 
    (click)="onExpandFilter()"><mat-icon class="search-icon" svgIcon="search_icon"></mat-icon>
</button>

Я бы предложил добавить CSS для кнопки, например:

 #search-button {
    border: none;
}

или что-то подобное.

Метки: