我已经创建了输入类型并创建了该框的边框,但是当我单击该按钮时,它显示默认颜色,但我不应该显示默认颜色 下面是显示的图像:
下面是我的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;
}
你可以尝试覆盖 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;
尝试
.Credit:focus{outline: none;}
只需添加另一行css
.Credit:FOCUS{
color: #DADADA;
}
离子5
使用CSS自定义属性:https://ionicframework.com/docs/api/item#css-custom-properties
变量.scss
--highlight-color-invalid: transparent !important;
--highlight-color-valid: transparent !important;
IONIC7
在 global.scss 中设置变量在最新的 ionic 版本 (7) 中不起作用。
$text-input-md-show-focus-highlight: false;
其他解决方案对我来说似乎非常棘手。所以我认为从代码质量的角度来看,最好使用自定义属性覆盖样式。
ion-input.custom.ion-valid {
--highlight-color: var(—-ion-color-primary);
}