FYI - Not MDB - Tailwinds Elements. Form won't allow that value.

Expected behavior

being able to style these borders of active/focused fields. Hiding the goofy blue ring. :)

Actual behavior

borders of fields have BOTH our styles AND the browser blue border somehow.

Resources (screenshots, code snippets etc.)

You will see in the following screenshot, the blue border shown, which is undesirable.

Do you have advice for what to add/subtract from where? https://app.screencast.com/w0LWXfVTm9Y3G (<- backup only)

What I have tried:

1. focus-visible:border-0
2. focus-visible:none
3. focus-visible:border-primary
4. focus:ring-0
5. focus-visible:ring-0
6. ALL of those without "visible"
7. border-transparent
8. focus:border-transparent
9. a host of other things I can't remember

here is my element code:

 <div class="mx-auto relative mb-8 sm:basis-1/3"
                         data-te-input-wrapper-init
                         @if($this->fieldIsRequired('unit_situations', 'odometer_hours'))
                            data-te-validate="input"
                            data-te-validation-ruleset="isNumber"
                            data-te-invalid-feedback="Must be a number."
                         @endif>
                        <input
                            wire:model="unit_situations__odometer_hours"
                            x-mask="9999999"
                            id="unit_situations__odometer_hours"
                            type="text"
                            class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] focus-visible:ring-0 outline-none active:border-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-bright [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                            placeholder="Default input"/>
                        <label
                            id="vertical_miles_label"
                            for="unit_situations__odometer_hours"
                            class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-bright"
                        >How many Miles/Hours
                        </label>
                    </div>

Thank you