問題描述

我已經(jīng)創(chuàng)建了輸入類型并為該框創(chuàng)建了邊框，但是當我單擊該按鈕時，它顯示的是默認顏色，但我不應(yīng)該顯示默認顏色下面是顯示的圖像:

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:

下面是我的html代碼:

Below is my html code:

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

下面是我的css代碼:

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;


}

推薦答案

你可以嘗試重寫Ionic的樣式規(guī)則，因為輸入有效或無效時也會發(fā)生同樣的情況:

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

更新

解決這個問題的更離子方式是在 variables.scss 文件中添加以下內(nèi)容:

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;

這篇關(guān)于如何刪除輸入類型中的默認顏色?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！