Ionic / Angular, как убрать границы с входов

Question

Я получаю ниже черные границы в моих полях ввода. Как убрать некрасивую границу в 1 пиксель вокруг элементов управления?

Я не могу найти его в CSS или не знаю, как его искать, поскольку я новичок в этом.

Код:

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

Результат безобразный 1px границы вокруг входов:

Answer 1

Простой способ

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

Answer 2

Чистые входы и текстовые области:

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

Answer 3

Вы можете добавить атрибут стиля к вашему входу и установить границу none

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

Если у вас есть более одного входного тега в вашем html-файле, я бы предпочел использовать внешний CSS-файл и написать следующие строки, чтобы отключить границы для всех входных данных. !

input {
  border: none;
}

Answer 4

Чтобы удалить границы из <input>, просто установите для свойства border значение none.

input {
  border: none;
}

<input type="text" placeholder="Card number">

Для получения дополнительной информации см. Документацию MDN для свойства border .

Если вы хотите сохранить нижнюю границу,и добавьте отступы и отступы, см. пример ниже.

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