如何删除输入类型的默认颜色？ [英] How to remove default color in input type?

问题描述

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

以下是我的html代码：

 < ion-item class =Credit> 
< ion-input type =number
 placeholder =信用卡号码
 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; 
背景重复：不重复; 
 border：1px solid #DADADA; 
 margin-bottom：10px; 
 
 
} 
  

解决方案

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

  / *隐藏android默认验证颜色的解决方法* / 
 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：不是（.input-has-focus）.item-inner {
 border-bottom-color：#dadada; 
 box-shadow：none; 
} 
 
 / *隐藏窗口手机默认验证颜色的解决方法* / 
 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; 
} 
  

更新
$ b

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

  //离子变量覆盖
 $ text-input-ios-show-focus-highlight：false; 
 $ text-input-md-show-focus-highlight：false; 
 $ text-input-wp-show-focus-highlight：false; 
  

I had created the input type and created the border the border for that box,but when i had clicked in that button it is displaying the default color but i should not display the default color Below is the displayed image:

Below is my html code:

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

Below is my css code:

.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;


}

解决方案

You can try by overriding Ionic's style rules, because the same will also happen when the input is valid or invalid:

/* 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;
}

UPDATE

A more Ionic way to solve this, would be by adding the following in the variables.scss file:

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

这篇关于如何删除输入类型的默认颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！