> ## Documentation Index
> Fetch the complete documentation index at: https://docs.malga.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```typescript theme={null}
// 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.

```css theme={null}
.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
}
```

<CardGroup>
  <Card href="/sdks/tokenization/v2/events" title="Eventos">
    Aprenda a utilizar os eventos disponíveis
  </Card>
</CardGroup>