How to adjust search bar border in Dawn theme with CSS?

Technical Q&A
,
1

I can adjust anything in css and liquid except for the border of the search bar in dawn. I can’t find anywhere what the CSS lines are for the hover and the border line as I like to remove them.

Any idea where I can find them? Thanks

1 Like
2

Hi There,

You are not alone in this :). It took me hours upon hours to find the code to remove it. I belive it is a box shadow. I will reply with the exact location shortly.

1 Like
3

I noticed it could be a box shadow, but even that I could not find also not in js. The header is the hardest thing in the template. Thanks for your help.

4

Go to base.css. On line 1653, comment out as below:

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
/* box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));*/
outline: 0;
border-radius: var(--inputs-radius);
}

Please make sure you backed up your theme before trying this.

5

@carlosx2

oh can you please send store url so i will check and let you know

6

Thank you so much, I really don’t think I would have found it without this. Been coding for years, but how they know how to hide stuff, or don’t have comments anywhere in the file is just crazy. I have been adding comments to keep track of all the changes I am adding.

7

For anyone else who would like to do this. The line you must comment out is repeated five times above this block of code. You will recognize it quickly.

8

:focus-visible {
/ outline: 0.2rem solid rgba(var(–color-foreground), 0.5);
outline-offset: 0.3rem;
box-shadow: 0 0 0 0.3rem rgb(var(–color-background)),
0 0 0.5rem 0.4rem rgba(var(–color-foreground), 0.3); */
}

/* Fallback - for browsers that don’t support :focus-visible, a fallback is set for :focus */
.focused,
.no-js :focus {
/ outline: 0.2rem solid rgba(var(–color-foreground), 0.5);
outline-offset: 0.3rem;
box-shadow: 0 0 0 0.3rem rgb(var(–color-background)),
0 0 0.5rem 0.4rem rgba(var(–color-foreground), 0.3); */
}

9

I have no idea how to insert code here on this forum. However, I wanted to add that you need to comment out the block above to get rid of the transparent outline that is still there. Go to line 845 to find that piece of CSS in the base.css.

10

Hello Jay,

thanks, that works perfect.

But if I comment it out at this point it modifies all of the input Boxes.

If I only would like to remove the border in the Search Bar: How can I do that?

Thank you!