How to make the Search Bar box outline bolder

[FlashFab]

Hello!

Here is the website:

https://mahindradirectparts.com/

Theme: Avenue

How can I make the search bar box outline bolder so it is more noticeable? It turns bold when you click in it, how do I make that the permeant style?

[BSSCommerce-B2B]

@FlashFab ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
.search-form.search-form-header > span {
  border-width:2px!important
}
</style>

Result:

[BSSCommerce-B2B · Accepted solution]

Hi @FlashFab 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file custom.css. Search for the following CSS snippet

.search-field.section-color {
    box-shadow: inset 0 0 0 2px var(--black), inset 0 0 0 3px var(--white);
}

If it helps you, please like and mark it as the solution.

Best Regards

[topnewyork]

Hi @FlashFab , 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.static-search input[type="search"].search-field {
    border: 2px solid var(--customer_font_color) !important;
  }
</style>

Or the below code:

<style>
.search-form.search-form-header > span {
  border-width:2px !important;
}
</style>

Or the below:

<style>
input[type="search"].search-field {
    box-shadow: inset 0 0 0 4px var(--black), inset 0 0 0 4px var(--white);
}
</style>

Result:

And

And

Use the one that fits your needs

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[BSS-TekLabs]

- Here is the solution for you @FlashFab 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
.static-search input[type="search"].search-field {
    border: 3px solid black !important;
}
</style>

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-HDL]

Hi @FlashFab, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
input[type="search"].search-field {
    box-shadow: inset 0 0 0 2px var(--black), inset 0 0 0 3px var(--white);
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Huptech-Web]

Hello @FlashFab, to do this just write this below code in your CSS file.

1) Search bar one CSS code.

.static-search input[type="search"].search-field {
    box-shadow: inset 0 0 0 2px var(--customer_font_color), inset 0 0 0 3px var(--white);
}

 2) Search bar second CSS code.

.search-section .text-center input[type="search"].search-field {
    box-shadow: inset 0 0 0 2px var(--black), inset 0 0 0 3px var(--white);
}

Here is the screenshot of the same:-

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[dws_pvt_ltd]

Hello @FlashFab, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file.
5. open "styles.accessories.css"
6. Add the following code at the end of the file.

.static-search input[type="search"].search-field {
    color: var(--customer_font_color);
    border: 2px solid var(--customer_font_color); /* change this border none to this value */
    height: auto;
    margin: 0;
    min-height: auto;
    padding: calc(var(--master_spacing) / 4) calc(var(--master_spacing) / 2);
}

.static-search .search-form.search-form-header > span button {
    background: none;
    color: var(--customer_font_color);
    height: auto;
    padding: 0; 
    border: 2px solid var(--customer_font_color); /* add this new CSS */
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.