Ionic/Angular how to remove borders from inputs

user_838355 0
Viewed 2704

I get the below black borders in my input fields. How do I remove the ugly 1px border around the controls?

I can't find it in the CSS or don't know how to look for it as I'm new to it.

Code:

<ion-col col-8>
    <input formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>

Result ugly 1px borders around inputs:

enter image description here

ionic-framework angular sass css
4 Answers

Clean Inputs & textarea:

textarea, input 
{ 
 background:none; 
 outline: none; 
 -webkit-appearance: none; 
 box-shadow: none !important; 
 border: none; 
}
user_102516890

Simple Way 

input{
   border: none; // for black border
   outline: none; // for focus outline remove
}
user_93729230

To remove borders from <input>, just set border property to none.

input {
  border: none;
}
<input type="text" placeholder="Card number">

For more info, refer MDN documentation on border property.

If you want to keep the bottom border, and add some padding and margin, see below example.

input {
  height: 2rem;
  margin: 0rem 1rem;
  padding: 0rem 1rem;
  border-width: 0px;
  border-bottom: 1px solid #e4e9f0;
}

input:focus {
  outline: none;
}
<input type="text" placeholder="Card number">

user_29245770

You can add a style attribute to your input and set the border to none

<ion-col col-8>
    <input style="border:none;" formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>

If you have more than one input tag in your html-file I would prefer to use an external CSS-file and write the following lines to disable the borders for all inputs! 

input {
  border: none;
}

user_90805020
Related