Solved

Adding a border to my search bar

Wooow1481
Tourist
9 1 2

www.lionsmanecanada.com

I have sinced deleted the original search icon by deleting the code within the search snippet. I have created a new snippet that I created in the header.liquid file to render my new search bar...

Code here:

{% if search.performed %}

{% else %}
<div class="search-form__container" data-search-form-container="">
<form class="search-form search-bar__form" action="/search" method="get" role="search">
<div class="search-form__input-wrapper">
<input required type="text" name="q" placeholder="Search LionsManeCanada.com" role="combobox" aria-autocomplete="list" aria-owns="predictive-search-results" aria-expanded="false" aria-label="Search" aria-haspopup="listbox" class="search-form__input search-bar__input" data-predictive-search-drawer-input="" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">
<input type="hidden" name="options[prefix]" value="last" aria-hidden="true">
<div class="predictive-search-wrapper predictive-search-wrapper--drawer" data-predictive-search-mount="drawer"></div>
<div style="position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 2; border: 2;" data-search-announcer="" aria-live="polite" aria-atomic="true"></div></div>

<button class="search-bar__submit search-form__submit" type="submit" data-search-form-submit="">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"></path></svg>
<span class="icon__fallback-text">Submit</span>
</button>
</form>
</div>

{% endif %}

I want to add a border to this search bar. Any suggestions?

Thank you.

Accepted Solution (1)

xtrend
Explorer
64 23 24

This is an accepted solution.

you can either write the css in your header section separate css file or theme css..

within the same section you can write it like 

<style>

.search-form .search-form__input {

border: 1px solid #000;

}

</style>

here i used border color black but you can use whatever color you like

View solution in original post

Replies 2 (2)

xtrend
Explorer
64 23 24

This is an accepted solution.

you can either write the css in your header section separate css file or theme css..

within the same section you can write it like 

<style>

.search-form .search-form__input {

border: 1px solid #000;

}

</style>

here i used border color black but you can use whatever color you like

Wooow1481
Tourist
9 1 2

Thank you, I added that code to my new "search" snippet and it worked!