why does CSS 'form' element background color not change for the whole form and not just it-CodePudding

I am making this blog practice home webpage and I am making a search bar in the top right corner that is made of a form element containing an input 'type search' element and a button 'type submit'.

I am making hover and focus effects using pseudo-classes for the form to change its color, but I get a problem where the inner elements in the form parent get the effect but the rest of the form container doesn't change color.

my snippets:

/* general css */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "calibri";
}

.header h2 {
    margin: 15px;
    padding: 10px;
    color: azure;
    
}

.header h2 a {
    color: azure;
    text-decoration: none;
}

.header h2 a:hover {
    color: rgb(255, 24, 81);
}

.sponsers img, .social-media img {
    width: 40px;
}

.sponsers img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.nav-menu ul{
    margin: 10px;
} 

/*general css end*/

.header {
    background-color: rgba(0, 0, 0, .6);
    background-image: url("/Images/blogimage.jfif");
    background-blend-mode:multiply;
    background-size:cover;
    margin: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    } 

.header h1 {
    grid-column: 1 / 3;
    margin: 2em;
    color: aliceblue;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: initial;
    word-wrap: break-word;
    text-align: center;
}

.nav-menu li {
    display: inline;
    padding: 0 5%;
}

.nav-menu a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    color: aliceblue;
    font-weight: bold;
}

.nav-menu a:hover {
    background-color: rgba(225, 225, 225, .3);
    color: rgb(255, 24, 81);
    border-radius: 30px;
}

.search-bar {
    display: flex;
    border-radius: 30px;
    border: none;
    outline: none;
    height: 30px;
    width: 250px;
    margin: 15px;
    padding: 10px;
    background-color: rgba(236, 220, 220, 0.817);
    align-items: center;
    align-content: stretch;
    justify-content: center;
}

.search-bar input {
    border: none;
    outline: none;
    background: transparent;
    color: black;
    border-radius: inherit;
    padding: 8px;
    margin: o;
    color: inherit;
    flex: 1;
    overflow: hidden;
}

.search-bar :hover {
    background-color: rgba(255, 24, 81, .6);
}

.search-bar :focus {
    background-color: rgba(134, 131, 181, 0.3);
    border: none;
    outline: none;
}

.search-bar :hover::placeholder {
    color: rgba(236, 220, 220, 0.817);
}

.search-bar :focus::placeholder {
    color: rgba(67, 60, 60, 0.6);
}

.search-bar button {
    border-radius: inherit;
    width: 30px;
    height: 30px;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

.search-bar img {
    size: 30px;
    width: 17px;
    height: 17px;
}

    <header >
        <h2 ><a href="index.html">blog name</a></h2>
        <nav >
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
        </nav>
        <form  action="">
            <input type="search" placeholder="search the blog">
            <button type="submit">
                <img src="/images/loupe.png" alt="search-image">
            </button>
        </form>
        <h1 >Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
    </header>

as you can see when you hover over and click the search bar form element, only the input and buttons get a color change. how do I fix this?

CodePudding user response：

The space between simple selectors is a descendant combinator in CSS. If it were two ordinary selectors separated with space, it would mean 'element matching the second selector, placed anywhere inside the element matching the first selector'. Since the second selector is a pseudo element, the whole selector is equivalent to .label-hi *:before, potentially inserting something into any element inside the element with class label-hi.

Thanks to Ilya Streltsyn who already answered this here and I put his answer here.

This is a snippet of the correct code:

/* general css */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "calibri";
}

.header h2 {
    margin: 15px;
    padding: 10px;
    color: azure;
    
}

.header h2 a {
    color: azure;
    text-decoration: none;
}

.header h2 a:hover {
    color: rgb(255, 24, 81);
}

.sponsers img, .social-media img {
    width: 40px;
}

.sponsers img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.nav-menu ul{
    margin: 10px;
} 

/*general css end*/

.header {
    background-color: rgba(0, 0, 0, .6);
    background-image: url("/Images/blogimage.jfif");
    background-blend-mode:multiply;
    background-size:cover;
    margin: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    } 

.header h1 {
    grid-column: 1 / 3;
    margin: 2em;
    color: aliceblue;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: initial;
    word-wrap: break-word;
    text-align: center;
}

.nav-menu li {
    display: inline;
    padding: 0 5%;
}

.nav-menu a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    color: aliceblue;
    font-weight: bold;
}

.nav-menu a:hover {
    background-color: rgba(225, 225, 225, .3);
    color: rgb(255, 24, 81);
    border-radius: 30px;
}

.search-bar {
    display: flex;
    border-radius: 30px;
    border: none;
    outline: none;
    height: 30px;
    width: 250px;
    margin: 15px;
    padding: 10px;
    background-color: rgba(236, 220, 220, 0.817);
    align-items: center;
    align-content: stretch;
    justify-content: center;
}

.search-bar input {
    border: none;
    outline: none;
    background: transparent;
    color: black;
    border-radius: inherit;
    padding: 8px;
    margin: 0;
    color: inherit;
    flex: 1;
    overflow: hidden;
}

.search-bar:hover {
    background-color: rgba(255, 24, 81, .6);
}

.search-bar:focus {
    background-color: rgba(134, 131, 181, 0.3);
    border: none;
    outline: none;
}

.search-bar:hover::placeholder {
    color: rgba(236, 220, 220, 0.817);
}

.search-bar:focus::placeholder {
    color: rgba(67, 60, 60, 0.6);
}

.search-bar button {
    border-radius: inherit;
    width: 30px;
    height: 30px;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

.search-bar img {
    size: 30px;
    width: 17px;
    height: 17px;
}

    <header >
        <h2 ><a href="index.html">blog name</a></h2>
        <nav >
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
        </nav>
        <form  action="">
            <input type="search" placeholder="search the blog">
            <button type="submit">
                <img src="/images/loupe.png" alt="search-image">
            </button>
        </form>
        <h1 >Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
    </header>