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
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.