Archived topic

styling the search bar element

3 replies · Started by Cynthia on August 25, 2021

Viewing posts 1–4 of 4

August 25, 2021 at 6:31 pm #1908572

I applied the following css to the search bar but it's not working as expected:

.navigation-search input[type="search"]{
height:60px;
font-size:25px;
color:#000000;
background-color:#afd692;
margin-top:30px;
border-radius:30px;
}

It only appears green when I click outside of the search bar. It goes back to white if I am typing in the search bar. I think it's the "active" element that needs to be styled but not sure what that is.

Also, how can I make the background area of the "X" transparent (it is a white block right now) and also make the X color black?

Screenshot and website in link below

Thank you!

August 25, 2021 at 9:27 pm #1908637

Hi there,

Try adding this CSS:

span.menu-bar-item.search-item.active.close-search > a {
    background-color: transparent !important;
    color: black;
}

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active {
    background-color: #afd692 !important;
    color: black;
}

form.search-form.navigation-search.nav-search-active {
    top: 50%;
    transform: translateY(-50%);
}

August 27, 2021 at 2:02 pm #1910487

Ok part of what you provided worked, but now when I am typing inside the search bar, the text is invisible. Hmmm.

August 27, 2021 at 2:37 pm #1910502

Try change this CSS:

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active {
    background-color: #afd692 !important;
    color: black;
}

to this:

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active {
    background-color: #afd692 !important;
    color: black !important;
}

Let me know :)

This archived topic is closed to new replies.

Start building better websites today.