Hello,
How can i change the search bar from this:
To this:
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!
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:
I copy/pasted the code in Base.css section with no success
Search bar remained as is
Thanks for your input
I pasted the above code in Base.css with no success - search bar remained unchanged
Did you save and refresh the browser after saving?
Yes indeed
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;
}
Hello,
I transferred the code in the component-search.css but also did not worked
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 tag
input#Search-In-Modal .search__input.field__input{
border: 1px solid #e5e5e5 !important;
border-radius: 50px !important;
}
