How can I modify the search bar appearance?

[User1236]

Hello,

How can i change the search bar from this:

To this:

[HeyCally]

Good question! 

I would check your CSS style code and use the following to remove the border

input{
    border: none;
}

You can also adjust the following to adjust the formatting for input fields:

input, div {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    font: 13px sans-serif
}

This allows you to adjust the fonts, the padding and spacing as well as the border for the input fields.

Depending on your theme , this can be added in the CSS section of the affected section in the Theme Customizer. 

You may also consider editing the CSS templates of your theme if you can find the correct one where the input field is being styled from, but that's a bit more advanced and we'd have to have a closer look at your theme to find a solution.

If you found my answer helpful, I'd appreciate a like and marking it as the solution if it fixed it!

If you found yourself a bit stuck, feel free to send us a private message and we can figure something out!

[User1236]

Thanks for your input

I pasted the above code in Base.css with no success - search bar remained unchanged

[Made4uo-Ribe]

Did you save and refresh the browser after saving? 

[User1236]

Yes indeed.

Below you may find what i have did

Please let me know in case i missed a step

[Made4uo-Ribe]

This is your Store right?

https://craftworke.com/ 

[User1236]

Yes indeed

[Made4uo-Ribe]

Hi @User1236 

Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 989px){
input#Search-In-Modal {
     border: 1px solid gray;
    border-radius: 20px;
}
}
input#Search-In-Modal-1 {
    border: 1px solid gray;
    border-radius: 20px;
}

• And Save.
• Result:
• 
• 

[User1236]

I copy/pasted the code in Base.css section with no success

Search bar remained as is

[Made4uo-Ribe]

Can you transfer the code, in same folder but in the component-search.css if still not working please replace with the code below. 

And still not working, please let me know. let think another solution. 😄

@media only screen and (max-width: 989px){
input#Search-In-Modal {
     border: 1px solid gray !important; 
    border-radius: 20px !important;
}
}
input#Search-In-Modal-1 {
    border: 1px solid gray !important;
    border-radius: 20px !important;
}

[User1236]

Hello,

I transferred the code in the component-search.css but also did not worked

[User1236]

Hello,

Possible to have the search bar visible all the time without clicking on the search icon

Current

Suggested new:

To be on the left of brand title (CraftWorke)

[syedsumaimaly]

Hi @User1236 

Follow these Steps:

Go to Online Store Edit Code Find theme.liquid file or base.css

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

input#Search-In-Modal .search__input.field__input{
    border: 1px solid #e5e5e5 !important;
    border-radius: 50px !important;
}