单击时搜索按钮移动

Question

my site上的搜索按钮正在发生某些事情。我在顶部页眉中有一个，在底部页脚中有一个。底部的一个很好用。但是标题中的那个，当单击按钮时，它会向下移动，然后您必须再次单击它才能启动搜索。

两者都在小部件内（我使用的是带有Brunch Pro主题的Wordpress）。我不知道该怎么办才能导致这种情况。我要做的就是更改定制器中按钮的颜色。是什么原因导致按钮那样移动？

Answer 1

该按钮在: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行）：

Answer 2

您在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;
}