Ionic/Angular如何去掉输入框的边框？

Question

我在输入字段中看到了以下黑色边框，如何去掉控件周围丑陋的1像素边框？

我无法在CSS中找到它或不知道如何查找它，因为我是新手。

代码：

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

输入框周围出现了难看的1像素边框：

- ir2pid

Answer 1

清洁输入框和文本域：

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

- Macodesk

Answer 2

简单的方式

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

- MohammedAli

Answer 3

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

- Nikhil

Answer 4

你可以在输入框中添加style属性，并将边框设置为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;
}

- Raphael