Estilizando os campos

Buscando oferecer mais flexibilidade, disponibilizamos um objeto que permite aplicar os estilos desejados nos inputs da nossa aplicação.

Existem algumas regras para a utilização desse objeto, que estão detalhadas abaixo.

// Aplicação em todos os inputs do hosted fields.
styles: {
 input: {
  color: "orange",
  "font-size": "16px",
  },
} 
// Mudando cor do text apenas do input de card-number (serve para os demais)
".card-number": {
  color: "blue",
}

// Mudando a cor do text na hora do focus para todos os inputs
":focus": {
 color: "red",
}

// Exemplo contendo as 3 mudanças citadas.
styles: {
  input: {
    color: "orange",
    "font-size": "16px",
  },
  ".card-number": {
    color: "blue",
  },
  ":focus": {
    color: "red",
  },
}

Além disso, temos quatro classes específicas para lidar com estado do input, são elas:

Classe	Descrição
malga-hosted-field	Aplicada ao elemento pai do iframe. Responsável por estilizar a área externa do input (recomenda-se definir border, border-radius, etc.).
malga-hosted-field-focused	Aplicada quando o input recebe foco.
malga-hosted-field-valid	Aplicada quando a validação é bem-sucedida (valid === true).
malga-hosted-field-invalid	Aplicada quando há um erro e a validação falha (valid === false).

Essas classes podem ser adicionadas na folha de estilo da sua aplicação.

.malga-hosted-field {
  background-color: white
  border: 2px solid #39BFAD
  border-radius: 8px
}

.malga-hosted-field-focused {
  border-color: #147F70
}

.malga-hosted-field-valid {
  border-color: green
}

.malga-hosted-field-invalid {
  border-color: red
}

Eventos

Aprenda a utilizar os eventos disponíveis