Remove form field hover borders on Dawn theme

Store Design
, ,
1

I’m wondering how to hide the hover borders that appear on the search field, newsletter subscribe and basically all forms on Dawn theme.

I saw a seperate post that suggests you edit the base.css, however, I’m trying to avoid editing any of the base code files and keep all of my css in a seperate file I have going.

Here’s the code I’ve tried already:

/** ? ? ? Hide double weight borders on field focus  ? ? ? **/
.field__input:hover,
.select__select:hover,  
.customer .field input:hover, 
.customer select:hover, 
.field__input:focus, 
.select__select:focus, 
.customer .field input:focus, 
.customer select:focus, 
.localization-form__select:focus.localization-form__select:after,
.field__input:focus-visible, 
.select__select:focus-visible, 
.customer .field input:focus-visible, 
.customer select:focus-visible, 
.localization-form__select:focus-visible.localization-form__select:after {
    box-shadow: 0 0 0 calc(0rem + var(--inputs-border-width)) rgba(var(--color-foreground)) !important;
    outline: 0 !important;
}

Store: https://manifest-a-pearler.myshopify.com/

Password: pearler

Thanks in advance!

2

Hi @pearlerwork

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Add code below to bottom of file
.field:hover.field:after, .select:hover.select:after, .select__select:hover.select__select:after, .customer .field:hover.field:after, .customer select:hover.select:after, .localization-form__select:hover.localization-form__select:after {
	box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground),var(--inputs-border-opacity))!important;
}
3

Thanks @EBOOST ! Unfortunately this didn’t work. Do you think this means I should be changing some of the root properties? i.e. –inputs-border-width or –inputs-border-opacity ?

4

Hi @pearlerwork

I think you should remove all after and before for all field after that add a border for input box. You can try to code below

.field:before, .customer .field:before,.field:after, .customer .field:after {
	display: none!important;
}
.customer .field input, .customer select, .field__input, .select__select {
	box-shadow: 0 0 0!important;
    border: 1px solid #000;
}
5

Yeah that worked really nicely, thanks! @EBOOST