HTML / CSS: Prevent background color from being overwritten when text entered into a form

user_5179643 0
Viewed 158

I'm seeing some unexpected behavior from the following HTML/CSS code:

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>

When I hover over the search box, the background is white (as expected). However, when I type some text in the search box, the background color changes to rgb(232, 240, 254) according to the inspector. It seems as though the background color is being overwritten somewhere in the CSS.

Does anyone see why this is happening?

Thanks in advance!

css html
1 Answers

Chrome changes the background of input fields if you choose a "remembered" option.

You can prevent this by customizing the :webkit-autofill pseudo class:

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">

In your case:

*{
    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>

user_142512210
Related