Stile StripeInput

[rgiuliani]

Ciao,
all'interno di un'applicazione mobile con framework Ionic abbiamo utilizzato il componente StripeInput (all'interno di un elemento IonLabel).

Volevo sapere come poter impostare il colore del testo.

Ho provato a sovrascrivere le classi di default come indicato nella guida.

Code: Select all

.StripeElementIon {color: #fff;}
.StripeElementIon--focus {color: #fff;}
.StripeElementIon--invalid {color: #fff;}
.StripeElementIon--webkit-autofill {color: #fff;}


Il colore tuttavia viene ignorato.

Grazie.

[r.zambito]

Ciao,
all'interno di un'applicazione mobile con framework Ionic abbiamo utilizzato il componente StripeInput (all'interno di un elemento IonLabel).

Volevo sapere come poter impostare il colore del testo.

Ho provato a sovrascrivere le classi di default come indicato nella guida.

Code: Select all

.StripeElementIon {color: #fff;}
.StripeElementIon--focus {color: #fff;}
.StripeElementIon--invalid {color: #fff;}
.StripeElementIon--webkit-autofill {color: #fff;}


Il colore tuttavia viene ignorato.

Grazie.

Buongiorno, l'elemento stripeInput può essere customizzato con il CSS solo per quanto riguarda alcune proprietà grafiche (bordo,sfondo,ecc.), per altre bisogna agire sulla proprietà "options.style" (font, colore font,ecc.).
Capisco benissimo che non sia intuitivo e che nella stessa documentazione ufficiale Stripe non si capisca, a mio avviso, quale modalità usare di volta in volta.
Da quello che leggo sembra che volessi solo cambiare il colore del testo dell'input in tutti i vari casi, nell'onLoad della videata assegni alla proprietà options dell'elemento questi valori:

Code: Select all

$stripeInput.options = {
     elementsStyle : {
      base : {
        color : "#fff",
        fontSize : "1.1em",
        fontFamily : '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing : "antialiased",
        "::placeholder" : {
          color : "#999"
        } ,
        ":disabled" : {
          color : "#999",
          "::placeholder" : {
            color : "rgba(153, 153, 153, 0.4)"
          }
        } ,
        ':-webkit-autofill' : {
        color : '#fff',
        } ,
        ':focus' : {
        color : '#fff',
        }
      } ,
      invalid : {
        color : "#fff",
        iconColor : "red"
      } }
  } ;


In questo modo vengono mantenute le opzioni per renderlo omogeneo con lo stile Ionic e si cambia semplicemente il colore del testo dell'input.
C'è un piccolo problema che sarà corretto nella prossima versione, la proprietà "elementsStyle" dovrà poi essere correttamente cambiata con "style", ma in questo modo sulla versione corrente funziona.
Grazie

[rgiuliani]

Avevo provato con "options.style" nell'onLoad, ma non funzionava in quanto avevo provato con "style" anziché "elementsStyle" (come indicato sulla documentazione ufficiale).

Grazie.