свойство border: none не работает в браузере Safari.

Question

У меня проблемы с применением свойства 'border: none' в браузере Safari. Я попытался применить css класс с именем 'profile-label', который имеет свойство 'border: none' в тег 'label', как в приведенном ниже коде:

.profile-label {
  border: none;
  cursor: pointer;
}

<label for="photo" class="profile-label" type="submit">
     <img src="https://picsum.photos/536/354" alt="Foto" width="50" height="50" class="profile-photo" /> 
     <input type="file" id="photo" hidden  name="ProfileImage"/>
</label>

Это свойство некорректно работает в safari (border: none), но хорошо работает во всех других браузерах. Кто-нибудь знает почему?

Изображение с рамкой в ​​браузере сафари:

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

Answer 1

Отображается граница кнопки из-за ярлыка, заключающего изображение с атрибутом type = "submit".

Safari добавляет стиль по умолчанию для всех кнопок.

Попробуйте добавить -webkit-appearance: none; к вашему стилю метки

Или удалите атрибут type=submit

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

Answer 2

Возможно, вы захотите попробовать добавить следующее свойство в свой CSS:

outline: none;

Хотя я не уверен, что могу ответить, почему это происходит.