如何删除输入类型中的默认颜色？

Posted 2023-03-05

【中文标题】如何删除输入类型中的默认颜色？

【英文标题】：How to remove default color in input type?

【发布时间】：2017-05-12 15:55:08

【问题描述】：

我已经创建了输入类型并为该框创建了边框，但是当我单击该按钮时，它显示的是默认颜色，但我不应该显示默认颜色 下面是显示的图像：

下面是我的html代码：

<ion-item  class="Credit">
<ion-input type="number"
            placeholder="Credit Card number"
            class="form-control"></ion-input>
</ion-item>

下面是我的css代码：

.Credit  
        top: 20px;
         border-radius: 10px;
         width: 350px;
         display: block;
         margin-left: auto;
         margin-right: auto;
        background: url(../assets/images/credit_card.png);
        background-position:right;
        background-size: 45px;
        background-repeat:no-repeat;
        border:1px solid #DADADA;
        margin-bottom: 10px;

【问题讨论】：

设置焦点颜色，你想做什么。Credit:focus

【参考方案1】：

试试.Credit:focusoutline: none;

【讨论】：

.Credit:focusoutline: none;border-bottom:0;box-shadow:0

【参考方案2】：

只需添加另一行 css

.Credit:FOCUS
color: #DADADA;

【参考方案3】：

你可以尝试重写 Ionic 的样式规则，因为当输入有效或无效时也会发生同样的情况：

/* Workaround to hide android default validation colors */
ion-item.item-md.item-input.input-has-focus .item-inner,
ion-item.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner,
ion-item.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner 
    border-bottom-color: #dadada;
    box-shadow: none;


/* Workaround to hide window phone default validation colors */
ion-item.item-wp.item-input.input-has-focus .text-input,
ion-item.item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input,
ion-item.item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input 
    border: 2px solid #dadada;

更新

解决此问题的更离子方式是在variables.scss 文件中添加以下内容：

// Ionic variables override
$text-input-ios-show-focus-highlight: false;
$text-input-md-show-focus-highlight: false;
$text-input-wp-show-focus-highlight: false;

【讨论】：

我的边框颜色仍然在焦点上可见并且有效

【参考方案4】：

离子 5

使用 CSS 自定义属性：https://ionicframework.com/docs/api/item#css-custom-properties

variables.scss

 --highlight-color-invalid: transparent !important;
 --highlight-color-valid: transparent !important;