# How to remove bottom line from the ionic components

**URL:** <https://forum.ionicframework.com/t/how-to-remove-bottom-line-from-the-ionic-components/98447>\
**Category:** ionic-v3\
**Created:** [July 17, 2017, 10:35am UTC](https://forum.ionicframework.com/t/how-to-remove-bottom-line-from-the-ionic-components/98447 "2017-07-17T10:35:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![malithd](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@malithd](https://forum.ionicframework.com/u/malithd)\
**Post date:** [July 17, 2017, 10:35am UTC](https://forum.ionicframework.com/t/how-to-remove-bottom-line-from-the-ionic-components/98447/1 "2017-07-17T10:35:55Z")

</div>

I need to remove the white line in the bottom of the ion-input field.Any suggestion to overcome this problem!

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/0/2/02658f85fadc2391be90b6915cf58b5ef8303395.jpg)

---

<div class="post-metadata">

**Author:** ![elvis\_gn](https://avatars.discourse-cdn.com/v4/letter/e/5f8ce5/32.png) [@elvis\_gn](https://forum.ionicframework.com/u/elvis_gn)\
**Post date:** [July 17, 2017, 11:11am UTC](https://forum.ionicframework.com/t/how-to-remove-bottom-line-from-the-ionic-components/98447/2 "2017-07-17T11:11:24Z")

</div>

Share the html you’ve written till now.

---

<div class="post-metadata">

**Author:** ![pwespi](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@pwespi](https://forum.ionicframework.com/u/pwespi)\
**Post date:** [July 17, 2017, 11:44am UTC](https://forum.ionicframework.com/t/how-to-remove-bottom-line-from-the-ionic-components/98447/3 "2017-07-17T11:44:24Z")

</div>

Try setting these variables to false (I’m not sure which one is relevant for your case):

```auto
$text-input-ios-show-focus-highlight: false;
$text-input-ios-show-valid-highlight: false;
$text-input-ios-show-invalid-highlight: false;

$text-input-md-show-focus-highlight: false;
$text-input-md-show-valid-highlight: false;
$text-input-md-show-invalid-highlight: false;

$text-input-wp-show-focus-highlight: false;
$text-input-wp-show-valid-highlight: false;
$text-input-wp-show-invalid-highlight: false;

```

---

<div class="post-metadata">

**Author:** ![malithd](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@malithd](https://forum.ionicframework.com/u/malithd)\
**Post date:** [July 18, 2017, 4:13am UTC](https://forum.ionicframework.com/t/how-to-remove-bottom-line-from-the-ionic-components/98447/5 "2017-07-18T04:13:59Z")

</div>

```auto
<ion-item class="ion_card">
      <ion-input type="email" placeholder="Email" class="ion_input" pattern="[^ @]*@[^ @]*.[^@]*" formControlName="email" name="email"></ion-input>
    </ion-item>

```