离子/角度如何从输入中删除边框答案

【问题标题】：Ionic/Angular how to remove borders from inputs离子/角度如何从输入中删除边框
【发布时间】：2020-02-04 05:04:07
【问题描述】：

我的输入字段中出现以下黑色边框。如何删除控件周围丑陋的 1px 边框？

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

代码：

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

在输入周围产生丑陋的 1px 边框：

【问题讨论】：

标签： css angular ionic-framework sass

【解决方案1】：

简单的方法

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

【讨论】：

【解决方案2】：

要从<input> 中删除边框，只需将border 属性设置为none。

input {
  border: none;
}

&lt;input type="text" placeholder="Card number"&gt;

有关详细信息，请参阅MDN documentation on border 属性。

如果要保留底部边框，并添加一些内边距和边距，请参见下面的示例。

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

input:focus {
  outline: none;
}

&lt;input type="text" placeholder="Card number"&gt;

【讨论】：

【解决方案3】：

您可以在输入中添加样式属性并将边框设置为无

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

如果您的 html 文件中有多个输入标记，我更愿意使用外部 CSS 文件并编写以下行来禁用所有输入的边框！

input {
  border: none;
}

【讨论】：

【解决方案4】：

清理输入和文本区域：

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

【讨论】：