Ionic 6.4, Angular 14.2 - remove blue border on input fields?

I have a simple ion-item/ion-input

<ion-item fill="outline">
    <ion-label position="floating">Label</ion-label>
    <ion-input placeholder="Enter something here.."></ion-input>
</ion-item>

All looks fine until the ion-input gets focus and a blue outline is displayed around the ion-input
Capture

My reserach suggests it’s automically added by the browser? But I can’t seem to find any other references to this issue with Ioninc

I have found a fix for the same issue with Angular Material inputs here // https: //stackoverflow.com/questions/8622686/how-come-i-cant-remove-the-blue-textarea-border-in-twitter-bootstrap

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active {
    outline: 0px !important;
    -webkit-appearance: none;
    box-shadow: none !important;
}

So I have tried simlar (another) suggested fixes - but nothing is working e.g.

ion-item ion-input.has-focus {
    // outline: 0px !important;
    // -webkit-appearance: none;
    // box-shadow: none !important;

    // border-color: transparent;
    // -webkit-box-shadow: none;
    // box-shadow: none;

    outline: none !important;
    box-shadow: transparent !important;
}

Can someone please help.

After a whole bunch of comparing this project to another project that didn’t have this issue, I narrowed it down to having Tailwind installed. Removing the @import ‘tailwindcss/base’; line fixed the issue.

OK for me as I donlt need it and was just testing out Tailwind.

1 Like