Text in search bar not disappearing when you type

[Caidra]

I have a search and discover app configured on my site www.caidra.com but now when a customer starts typing in the search box, the pre-filled text prompt does not disappear, making it messy especially on mobile devices. Also, the logo goes missing.

Would appreciate if anyone can guide on what I can change to make the pre-filled text prompts disappear when a customer starts typing their search.

Preview Link is : https://caidra.com/?_ab=0&_fd=0&_sc=1 

Desktop View

Mobile view:

Thank you for your help.

MS

[Atlas_Vision]

Have you checked under Online Store>Themes>...>Edit Default Theme Content?
Some of the site text & placeholders can be edited through this.

This might only be for the default theme though, not a 3rd party app but something to consider looking into. 

[GemPages · Accepted solution]

Hello @Caidra 

I would like to give you a solution to support you.

You can add the below code to hide text in the search bar when the user types.

1. Go to Online Store -> Theme -> Edit code. https://prnt.sc/elKuwYWlBrEo

2. Open your base.css in the Assets folder.
3. Paste the below code at the end of the file. https://prnt.sc/HPs4db3vEt1C

input#Search-In-Modal ~ .field__label{
    font-size: 1rem !important;
    top: calc(var(--inputs-border-width) + 0.5rem) !important;
    left: calc(var(--inputs-border-width) + 2rem) !important;
    letter-spacing: .04rem !important;
}
input#Search-In-Modal:not(:placeholder-shown) ~ .field__label {
    display: none;
}
input#Search-In-Modal {
    transition: padding 0.1s;
}
input#Search-In-Modal:not(:placeholder-shown){
  padding-top: 0.8rem;
}

4. Save the file and double-check.

Best regards,
GemPages Support Team

[Caidra]

@GemPages this worked perfectly - thank you so much.

[INA_MSWEB]

Hi @Caidra!

I hope you are doing good and welcome to the Shopify Community!

This is MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from India & Singapore).

If you already added an app for your search you should connect with app customer care.

I hope this helped!