Removing highlight border from input

Ionic Framework ionic-v3
1

hi , I am trying to remove the highlight from an input

.html:

 <ion-item>
   <ion-input value="" type="text" placeholder="Add a comment..."></ion-input>
   <button ion-button clear item-right (click)="send()">POST</button>
 </ion-item>

image

I also added this in .scss:

 $text-input-md-show-success-highlight:  false;
 $text-input-md-show-error-highlight:  false;

but it doesn’t take effect unless if I remove ion-item but then I cannot align the button POST

.html:

 <ion-input value="" type="text" placeholder="Add a comment..."></ion-input>
  <button ion-button clear item-right (click)="send()">POST</button>

image

3

Did you use Developer Tools Inspect to find out where the “highlight” is actually applied to?

4

when I click on the input, this appears in styles

  .input-has-focus
  .input-cover {
        display: none;
  }

when I disable display the hightlight disappears… but dont know how to do it in the .scss file

5

if your ion-input in the ion-item
you can use this :slight_smile: :

for ionic v4

ion-item {
–highlight-color-focused: none;
}

may i help you

6

.item-interactive {

--highlight-background: unset;

}

1 Like