HTML / CSS：防止在表单中输入文本时覆盖背景颜色

Question

我从以下 HTML/CSS 代码中看到了一些意外行为：

CSS

*{
    font-family: arial, sans-serif;
    padding: 0px;
    margin: 0px;
}

body {
    display: flex;
    align-items: column;
    flex-direction: column;
}

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 30px;
    margin-top: 15px;
}

nav a {
    font-size: 13px;
    color: rgba(0, 0, 0, .87);
    text-decoration: none;
    cursor: pointer;
    padding: 7px;
}

nav a:hover {
    text-decoration: underline;
}

.buttons {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    margin-top: 30px;
}

.buttons:hover {
    box-shadow: 0 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
}

.search_input_area {
    background-color: white;
    display: flex;
    margin: 0px auto;
    color: rgba(0, 0, 0, .87);
    border: 1px solid #ddd;
    width: 580px;
    position: relative;
    padding: 5px;
    padding-left: 25px;
    height: 34px;
    font-size: 16px;
    border-radius: 25px;
}

.search_input_area:hover {
    box-shadow: 0 2px rgb(0 0 0 / 12%);
    background-color: white;
    border: 1px solid #dadce0;
    color: #202124;
}

.search_box {
    text-align: center;
    display: block;
}

#google-logo {
    margin-top: 200px;
    width: 20%;
    height: 20%;
}

<nav>
    <a href="images.html">Image Search</a>
    <a href="advanced-search.html">Advanced Search</a>
</nav>

<!--SEARCH BOX-->
<form class="search_box" action="https://www.google.com/search">
    <img id="google-logo" src="google-logo.png" alt="The Google Logo">
    <div>
        <input name="q" type="text" class="search_input_area">
    </div>
        <input type="submit" value="Search Google" class="buttons">
        <input type="submit" value="I'm Feeling Lucky" class="buttons">               
</form>

当我将鼠标悬停在搜索框上时，背景为白色（如预期）。但是，当我在搜索框中键入一些文本时，背景颜色会rgb(232, 240, 254)根据检查员更改为。似乎背景颜色在 CSS 中的某处被覆盖了。

有没有人明白为什么会这样？

提前致谢！

Answer 1

如果您选择“记住”选项，Chrome 会更改输入字段的背景。

您可以通过自定义:webkit-autofill伪类来防止这种情况：

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active
{
 -webkit-box-shadow: 0 0 0 30px white inset !important;
}

<input name="username">

在你的情况下：

*{
    font-family: arial, sans-serif;
    padding: 0px;
    margin: 0px;
}

body {
    display: flex;
    align-items: column;
    flex-direction: column;
}

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 30px;
    margin-top: 15px;
}

nav a {
    font-size: 13px;
    color: rgba(0, 0, 0, .87);
    text-decoration: none;
    cursor: pointer;
    padding: 7px;
}

nav a:hover {
    text-decoration: underline;
}

.buttons {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    margin-top: 30px;
}

.buttons:hover {
    box-shadow: 0 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
}

.search_input_area {
    background-color: white;
    display: flex;
    margin: 0px auto;
    color: rgba(0, 0, 0, .87);
    border: 1px solid #ddd;
    width: 580px;
    position: relative;
    padding: 5px;
    padding-left: 25px;
    height: 34px;
    font-size: 16px;
    border-radius: 25px;
}

.search_input_area:hover {
    box-shadow: 0 2px rgb(0 0 0 / 12%);
    background-color: white;
    border: 1px solid #dadce0;
    color: #202124;
}

.search_box {
    text-align: center;
    display: block;
}

#google-logo {
    margin-top: 200px;
    width: 20%;
    height: 20%;
}
.search_input_area:-webkit-autofill,
.search_input_area:-webkit-autofill:hover, 
.search_input_area:-webkit-autofill:focus, 
.search_input_area:-webkit-autofill:active
{
 -webkit-box-shadow: 0 0 0 30px white inset !important;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Google</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="search.css">
    </head>

    <body>
        <!--NAVIGATION LINKS-->
        <nav>
            <a href="images.html">Image Search</a>
            <a href="advanced-search.html">Advanced Search</a>
        </nav>

        <!--SEARCH BOX-->
        <form class="search_box" action="https://www.google.com/search">
            <img id="google-logo" src="google-logo.png" alt="The Google Logo">
            <div>
                <input name="q" type="text" class="search_input_area">
            </div>
                <input type="submit" value="Search Google" class="buttons">
                <input type="submit" value="I'm Feeling Lucky" class="buttons">               
        </form>
    </body>
</html>