Question

我的网站顶部有一个搜索字段，当您选择它时，它会跳出abit out of position，当您单击开箱即可选择但未关闭它时，搜索字段会正确对齐。当光标在输入字段中时，我无法弄清楚是什么让它移动。

https://www.argentscientific.com

单击该链接，然后单击顶级菜单右侧的搜索图标，您将看到问题所在。相当困惑于此。

Answer 1

这是因为:focus未包括在内。当您选择搜索输入时，会触发:focus但是现有的css会覆盖您的css，为了解决此问题，您需要明确地将:focus包含在您的css中以防止被覆盖。尝试从

更改以下css

.aws-container .aws-search-field{
    width: 100%;
    color: #313131;
    padding: 6px;
    line-height: 30px;
    display: block;
    font-size: 12px;
    position: relative;
    z-index: 2;
    background: rgb(247, 247, 247);
    -webkit-appearance: none;
}

到

.aws-container .aws-search-field, .aws-container .aws-search-field:focus {
    width: 100%;
    color: #313131;
    padding: 6px;
    line-height: 30px;
    display: block;
    font-size: 12px;
    position: relative;
    z-index: 2;
    background: rgb(247, 247, 247);
    -webkit-appearance: none;
}

输入框在选中时移动

1 个答案: