1

.modal-close {
    position: absolute;
    top: 78px;
    right: 90px;
    width: 22px;
    height: 22px;
    border: 0;
    cursor: pointer;
    padding: 0;
    background-color: transparent;
}    

.modal-close::before,
.modal-close::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 3px;
    top: 40%;
    left: 0;
    background-color: #f0595a;
    opacity: 0.3;
}

.modal-close::before {
    transform: rotate(45deg);
}

.modal-close::after {
    transform: rotate(-45deg);
}

.modal-close:hover::before,
.modal-close:hover::after {
  opacity: 1;
}

.modal-close:focus::before,
.modal-close:focus::after {
  opacity: 1;
}

.visually-hidden {
   position: absolute;
   clip: rect(0, 0, 0, 0);
   width: 1px;
   height: 1px;
}
<button class="modal-close" type="button">
   <span class="visually-hidden">Закрыть</span>
</button>

Подскажите, пожалуйста, с какой ошибкой может быть связан подобный фокус на кнопке закрытия формы?

обводка не по контуру кнопки

2
  • Причин может быть много, как минимум в вёрстке, без кода сложно что-нибудь сказать
    – Arthur
    10 июл 2020 в 13:28
  • спасибо, добавила 10 июл 2020 в 13:38

2 ответа 2

2

Я думаю что стоит заменить свойства у класса visibility-hidden:

position: absolute;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;

на обычный display: none, потому как те свойства не скрывают полностью span, лежащий внутри кнопки.

.modal-close {
  position: absolute;
  top: 78px;
  right: 90px;
  width: 22px;
  height: 22px;
  border: 0;
  cursor: pointer;
  padding: 0;
  background-color: transparent;
}

.modal-close::before,
.modal-close::after {
  position: absolute;
  content: "";
  width: 24px;
  height: 3px;
  top: 40%;
  left: 0;
  background-color: #f0595a;
  opacity: 0.3;
}

.modal-close::before {
  transform: rotate(45deg);
}

.modal-close::after {
  transform: rotate(-45deg);
}

.modal-close:hover::before,
.modal-close:hover::after {
  opacity: 1;
}

.modal-close:focus::before,
.modal-close:focus::after {
  opacity: 1;
}

.visually-hidden {
  display: none;
}
<button class="modal-close" type="button">
   <span class="visually-hidden">Закрыть</span>
</button>

2
  • 1
    В данном случае лучше так не делать, нет смысла использовать данный блок с текстом. Таким способом, вы скрываете информацию, которая не будет доступной для читателей экрана
    – soledar10
    10 июл 2020 в 13:55
  • @soledar10, понял-принял
    – Arthur
    10 июл 2020 в 13:56
1

Пример

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
  overflow: hidden;
}

.modal-close {
  position: absolute;
  top: 78px;
  right: 90px;
  width: 22px;
  height: 22px;
  border: 0;
  cursor: pointer;
  padding: 0;
  background-color: transparent;
}

.modal-close::before,
.modal-close::after {
  position: absolute;
  content: "";
  width: 24px;
  height: 3px;
  top: 40%;
  left: 0;
  background-color: #f0595a;
  opacity: 0.3;
}

.modal-close::before {
  transform: rotate(45deg);
}

.modal-close::after {
  transform: rotate(-45deg);
}

.modal-close:hover::before,
.modal-close:hover::after {
  opacity: 1;
}

.modal-close:focus::before,
.modal-close:focus::after {
  opacity: 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
  overflow: hidden;  
}
<button class="modal-close" type="button">
   <span class="visually-hidden">Закрыть</span>
</button>

2
  • А обязательны ли свойства margin, padding и border? По идее одного overflow с головой
    – Arthur
    10 июл 2020 в 14:00
  • 1
    @Arthur - margin обязательно, padding и border - не обязательно
    – soledar10
    10 июл 2020 в 14:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.