Change color and layout Search bar (Publisher Theme)

[jensberly]

Hello,

I’ve been trying to figure out how to change the color of my search bar, delete de border around the search input when hovering/active and delete any effects when hovering on the product results (highlight and underlined text).

Here’s a screenshot of how it should approximately look like (ignore the icons, I just want to change the color, get rid of the border around the input and erase any hover/active effects):

And a screenshot of how it actually looks:

I also want to get rid of the red background that covers all the page when the search bar is active.

The site url: litichevskaya.myshopify.com (ask me for the pw and I’ll get back to you asap via dm!)

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Find Asset → base.css and paste this at the Bottom of the file:

.search-modal__form input#Search-In-Modal, 
.search-modal__form .field, .search-modal__form .field:after {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.search-modal__content.search-modal__content-bottom {
    background-color: red;
}
predictive-search.search-modal__form {
    background-color: red;
}
form.search.search-modal__form {
    background-color: red;
}
input#Search-In-Modal {
    background-color: red;
    color: #fff;
}
.predictive-search__item.predictive-search__item--term.link.link--text.h5.animate-arrow {
    color: #fff;
}
#predictive-search-products {
    color: #fff;
    background-color: red;
}

.predictive-search__result-group {
    background-color: red;
}

#predictive-search-option-search-keywords {
    background-color: red;
}

#predictive-search-results-groups-wrapper {
    background-color: red;
}

#predictive-search-option-search-keywords .icon.icon-arrow {
    background-color: #fff;
}

button.reset__button.field__button {
}

.search-modal__form .icon-search {
    color: #fff;
}
.search-modal.modal__content.gradient .icon.icon-close{
    color: #fff;
}
.predictive-search__item-heading {
    color: #fff;
}
.search.search-modal__form .field__label {
    color: #fff;
}

[jensberly]

thank you very much, it worked!

[ZestardTech]

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.