# Style formularza i style komponentu

## Dodanie stylów CSS na wniosku <a href="#title-text" id="title-text"></a>

Po kliknięciu w lewym menu bocznym na przycisk **Styl wniosku** ![](https://wiki.consdata.pl/download/thumbnails/221080918/image2021-7-23_9-47-27.png?version=1\&modificationDate=1627026448030\&api=v2) wysunie się panel boczny z edytorem arkusza CSS osadzonego we wniosku. Przycisk **Styl wniosku** widoczny jest tylko w edytorze **Wniosek**.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FSMcm57wtXSxf13uD8Scg%2Fimage.png?alt=media&#x26;token=e61a6696-0c97-492e-bd6a-289397fbf132" alt="" width="563"><figcaption><p><em><strong>Ilustracja 1.</strong> Panel edytowania stylów wniosku</em></p></figcaption></figure>

Edytor CSS oferuje:

* kolorowanie i podpowiadanie składni CSS,
* wyszukiwanie tekstu,
* podstawową walidację poprawności CSS,
* automatyczne odświeżanie wniosku po każdej zmianie definicji CSS.

Utworzony styl stosujemy poprzez wpisanie jego nazwy w polu **Nazwy stylów** dostępnym w sekcji **Stylizacja** panelu **Właściwości**.

## Stylizacja komponentów i style platformowe

Komponentom bazowym można nadawać style zdefiniowane w platformie lub style utworzone na wniosku. Ich nazwy należy dodawać w panelu **Właściwości** → sekcja **Stylizacja** → **Nazwy stylów** (kolejne style dodajemy poprzez naciśnięcie klawisza Enter).

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FInzGqtM0R05vRCPMCpgu%2Fimage.png?alt=media&#x26;token=47174030-8536-47c2-b998-056761fd07fb" alt=""><figcaption><p><em><strong>Ilustracja 2.</strong> Przykładowy styl <strong>ex-textfield-without-left-padding</strong> dodany do komponentu</em></p></figcaption></figure>

\
\
W przypadku dodawania stylu platformowego, dostajemy listę podpowiedzi stylów dostępnych dla danego komponentu.&#x20;

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F8jLl3zt3yiYRECXwzdx9%2Fimage.png?alt=media&#x26;token=45c3b53f-1aa1-4eae-8bc0-81cd3bba2ede" alt=""><figcaption><p><em><strong>Ilustracja 3.</strong> Przykładowa lista podpowiedzi dla komponentu Etykieta</em></p></figcaption></figure>

{% hint style="warning" %}
Dostępne style platformowe mogą różnić się w zależności od wdrożenia
{% endhint %}