Кнопка поиска перемещается при нажатии

Question

Что-то происходит с кнопкой поиска на моем сайте . У меня есть один в верхнем колонтитуле и один в нижнем колонтитуле. Тот, что внизу, работает нормально. Но тот, что находится в заголовке, когда кнопка нажата, она перемещается вниз, а затем вам нужно нажать ее еще раз, чтобы начать поиск.

Оба находятся внутри виджетов (я использую Wordpress с темой Brunch Pro). Я понятия не имею, что я мог сделать, чтобы вызвать это. Все, что я сделал, это изменил цвет кнопки в настройщике. Что может заставить кнопку двигаться так?

Answer 1

Ваша проблема в файле style.css движется вниз, потому что он больше, чем ширина div

.widget_search input[type="submit"]:focus {
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    display: block;
    font-size: 1em;
    font-weight: bold;
    height: auto;
    padding: 15px 20px 14px;
    text-decoration: none;
    width: auto;
    z-index: 100000;
}

Answer 2

Кнопка имеет дополнительные стили, которые применяются к ней в псевдоклассе :focus:

.widget_search input[type="submit"]:focus

Похоже, есть несколько конкурирующих / ненужных стилей, которые перезаписываются / добавляются, когда фокусируются. Сброс их всех исправит это:

.widget_search input[type="submit"]:focus {
    width: 38.2%;
    padding: 14px 20px;
    box-shadow: none;
    font-weight: 400;
    font-size: 11px;
}

Или просто удалите селектор widget_search input[type="submit"]:focus из файла style.css (в строке 1074):