> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Estilo personalizado con CSS en Web Accessibility

Nuestra app te permite personalizar por completo la apariencia de web accessibility mediante **CSS personalizado**. Dentro de los ajustes de web accessibility, encontrarás un **editor de CSS** en la pestaña Style donde puedes añadir tus propios estilos. Estos estilos se aplican directamente a los componentes de web accessibility cargados en tu sitio web o app.

Este artículo explica cómo está estructurado web accessibility y cómo apuntar a cada elemento con selectores CSS.

### Resumen de la arquitectura del banner

Todo el sistema de consentimiento se carga como un **Web Component** con la siguiente etiqueta raíz:

```html
<pandectes-a11y></pandectes-a11y>
```

Todos los elementos de web accessibility viven dentro de este componente. Al escribir CSS, puedes limitar opcionalmente tus reglas a pandectes-a11y para evitar afectar a otras partes de tu sitio.

Ejemplo:

```html
* {
  font-family: Arial, sans-serif;
}
```

### Elementos del banner que puedes personalizar
Web accessibility consta de dos**&#160;elementos principales**, cada uno de los cuales se puede estilizar de forma independiente.

###### 1. Dialog

Este es el cuadro de diálogo donde están disponibles todas las funciones de tu widget.

**Selector**

```
.a11y-option-tile {

}
```

**Ejemplo de personalización**

```
[data-role="notice"] {
  background-color: #ffffff;
  color: #333333;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
}
```

###### 2.  Widget – Button Icon

Este es el botón flotante o integrado que permite a los usuarios volver a abrir el cuadro de diálogo de accesibilidad.

**Selector**

```
button.widget {

}
```

**Ejemplo de personalización**

```
button.widget {
  background-color: #000000;
  color: #ffffff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
```

### Conclusión

Con los selectores anteriores, puedes controlar por completo el aspecto de cada parte de web accessibility para que coincida con tu marca y tu sistema de diseño.