Creé el tipo de entrada y creé el borde del borde para ese cuadro, pero cuando hice clic en ese botón, muestra el color predeterminado, pero no debería mostrar el color predeterminado A continuación se muestra la imagen mostrada: ingrese la descripción de la imagen aquí

A continuación se muestra mi código html:

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

A continuación se muestra mi código 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;


}
3
Krishna_32 28 dic. 2016 a las 14:09

3 respuestas

La mejor respuesta

Puede intentar anulando las reglas de estilo de Ionic, porque lo mismo también sucederá cuando la entrada sea válida o no válida:

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

ACTUALIZACIÓN

Una manera más jónica de resolver esto sería agregar lo siguiente en el archivo 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
sebaferreras 7 feb. 2018 a las 11:59

Prueba .Credit:focus{outline: none;}

0
Satpal 28 dic. 2016 a las 11:15

Solo agrega otra línea de CSS

.Credit:FOCUS{
color: #DADADA;
}
0
Malcolm Vaz 28 dic. 2016 a las 11:16