Почему мой: активный селектор теряет свое состояние события щелчка при трансформации масштаба?

Question

Я разработал кнопку для веб-сайта и попытался добавить transform: scale(0.95); к событию клика (используя селектор CSS :activate).

a.btn, input[type="submit"].btn, label.btn, button.btn {
  text-transform: uppercase;
  border: solid 1px #282828;
  font-size: 11px;
  line-height: 17px;
}
a.btn:active, input[type="submit"].btn:active, label.btn:active, button.btn:active {
  transform: scale(0.95);
}

<input type="submit" value="Show more recipes" class="btn"/>

Если пользователь щелкает границу кнопки, состояние :active уменьшает значок, и курсор больше не закрывает кнопку и, вероятно, больше не вызывает событие нажатия. Если пользователь щелкает внутри области scale(0.95), событие щелчка запускается как обычно.

Я пытаюсь сохранить событие click; Я попытался применить невидимую :before панель безуспешно, поскольку input[type='submit'] не поддерживает ее, и надеялся, что кто-то уже решил эту проблему.

Редактировать 14 января: теперь проблема переписана с использованием input[type='submit'], который не может содержать элементы.

Answer 1

Я надеюсь, вы шутите, что эта кнопка уже используется ВЕЗДЕ. :)

Предположим, у нас есть техническая задача, и наша цель - применить правило transform: scale(0.95); к кнопке при нажатии. Мы не можем изменить кнопку самостоятельно по некоторым «неизвестным» причинам.

Единственный псевдокласс, который может нам помочь, это :active. Работает с элементами привязки и кнопки, когда они активированы.

Решение состоит в том, чтобы обернуть кнопку в элемент привязки и написать селектор.

a:active input['submit'] {...}

Я обновил фрагмент. Серая область показывает, где пользователь может щелкнуть, чтобы применить псевдокласс. Вы можете настроить размер этой области и удалить серый фон.

a.btn, input[type="submit"].btn, label.btn, button.btn {
  text-transform: uppercase;
  border: solid 1px #282828;
  font-size: 11px;
  line-height: 17px;
}
.wrapper:active input[type="submit"],
a.btn:active, input[type="submit"].btn:active, label.btn:active, button.btn:active {
  transform: scale(0.95);
}
.wrapper {
  padding: 10px;
  background: gray;
}

<a class="wrapper">
  <input type="submit" value="Show more recipes" class="btn"/>
</a>

Кстати, у меня есть курс о CSS-селекторах , если вы хотите узнать больше.

Answer 2

Не самое лучшее решение, но единственное, о чем я могу подумать, это не значит переписать все ваши html.

Используйте тень для имитации границы. Теперь увеличьте реальную границу, установив прозрачную, чтобы получать события кликов.

В этом фрагменте я изменил цвет границы (ну, в качестве тени вставки) на красный и установил частично прозрачный синий цвет границы, чтобы сделать его работу более понятной.

В качестве примечания, вам не нужно точно соответствовать конечному измерению, даже если оно немного больше необходимого, не будет заметно.

a.btn, input[type="submit"].btn, label.btn, button.btn {

    text-transform: uppercase;
    border: solid 0px rgba(0,0,255,0.1);   /* should be transparent */
    box-shadow: inset 0px 0px 0px 2px red;
    font-size: 30px;
    line-height: 40px;
}

input[type="submit"].btn:active {
    transform: scale(.95);
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-right-width: 14px;
    border-left-width: 14px;
    margin-top: -5px;
    margin-left: -14px;
}

<input type="submit" value="Show more recipes" class="btn"/>

Answer 3

Вы можете легко обойти это

Создайте содержимое (вид кнопки) с помощью другого элемента в кнопке или привязке и поместите преобразование в новый элемент внутри кнопки. Таким образом, когда вы нажимаете кнопку, вы получаете преобразование и срабатывание js, поскольку действительная кнопка не уменьшается

вот простой пример

document.getElementById('moreRecipes').addEventListener('click', function() {
    alert("clicked");
});

button.btn span {

    text-transform: uppercase;
    border: solid 1px #282828;
    font-size: 11px;
    line-height: 17px;
    display: block;
}
button.btn:active span {
    transform: scale(.95);
}

<button id="moreRecipes" class="btn">
  <span>Show more recipes</span>
</button>

Answer 4

:active Неограниченно

Существует способ заставить :active продолжаться бесконечно или до тех пор, пока пользователь не щелкнет что-то еще, что станет :active.

1. Установите transition: 0.5s на input:active
2. Набор input Переход: 99999 с`

Входной переход к transform:scale(0.95) занимает 0.5s , но переход к обычному режиму займет около 28 часов или до тех пор, пока пользователь не щелкнет что-то, что станет :active.

Кстати, если вы хотите кнопку отправки, которая может содержать контент, то:

<button type='submit'>Show more recipe</button>

Кнопка отправки обычно используется для отправки формы, что означает перезагрузку всей страницы. Я предполагаю, что вы не используете форму. Если это так, то использование кнопки «Отправить» имеет столько же преимуществ, сколько и обычная кнопка.

Демо

.btn {
  text-transform: uppercase;
  border: solid 1px #282828;
  font-size: 11px;
  line-height: 17px;
  transition: 99s;
  transform: scale(1);
}

.btn:active {
  transform: scale(.95);
  transition: 0.7s;
}

<button type="submit" class="btn">Show more recipes</button>
<input type='submit' class='btn' value='Show more recipes'>

Answer 5

Когда вы используете событие click, вы фактически ожидаете оба события: mousedown и mouseup, и вы просто теряете его в части mouseup.

используйте событие moousedown, и оно будет работать для вас.

Измените свою строку на: document.getElementById('moreRecipes').addEventListener('mousedown', showMore);

Удачи.