Search box CSS issue

Solved

Search box CSS issue

JayFinlay
Excursionist
27 1 5

On my search results page found here https://downunderthunder.com.au/search?q=satisfyer&options%5Bprefix%5D=last 

The search box is white and has no border making it invisible. How do I change it to have a black border and white background.

Untitled.jpgUntitled2.jpg

Accepted Solutions (2)

Moeed
Shopify Partner
5782 1569 1861

This is an accepted solution.

Hey @JayFinlay 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.predictive-search__item-heading {
    color: black !important;
}
.predictive-search__item-heading mark {
    color: black !important;
}
.predictive-search__item--term svg {
    color: black !important;
}
.predictive-search__item--term {
    color: black !important;
}
.predictive-search.predictive-search--search-template {
    background: white !important;
    border: solid 1px black !important;
}
</style>

RESULT:

Moeed_0-1728438375224.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Moeed
Shopify Partner
5782 1569 1861

This is an accepted solution.

Hey @JayFinlay 

 

Keep the previous code and add this new code above </style> in the end of theme.liquid.

.search__input.field__input {
    border: solid 1px black !important;
}
.template-search__search .search label.field__label {
    color: black !important;
}
.search__button svg {
    color: black !important;
}

RESULT:

Moeed_0-1728439014787.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 5 (5)

Moeed
Shopify Partner
5782 1569 1861

This is an accepted solution.

Hey @JayFinlay 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.predictive-search__item-heading {
    color: black !important;
}
.predictive-search__item-heading mark {
    color: black !important;
}
.predictive-search__item--term svg {
    color: black !important;
}
.predictive-search__item--term {
    color: black !important;
}
.predictive-search.predictive-search--search-template {
    background: white !important;
    border: solid 1px black !important;
}
</style>

RESULT:

Moeed_0-1728438375224.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


JayFinlay
Excursionist
27 1 5

Thanks so much but the actual box to type in is still invisible with no black border and the text is white like the background. Example of the search box I am refering too. I made the box black but I can't figure out how to make just the border black with black text while typing.

 

Untitled.png

Moeed
Shopify Partner
5782 1569 1861

This is an accepted solution.

Hey @JayFinlay 

 

Keep the previous code and add this new code above </style> in the end of theme.liquid.

.search__input.field__input {
    border: solid 1px black !important;
}
.template-search__search .search label.field__label {
    color: black !important;
}
.search__button svg {
    color: black !important;
}

RESULT:

Moeed_0-1728439014787.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


JayFinlay
Excursionist
27 1 5

Thank you again! Almost perfect just missing one thing, the text itself as you type in the box is still white so you can't see what you have written. 

 

Edit: Did it myself, thank you.

Moeed
Shopify Partner
5782 1569 1861

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications