# Egyedi CSS használata

> Egy Ninja Forms mező HTML-szerkezete, az osztályok és azonosítók, a CSS-szelektorok az általánostól a legpontosabbig, és gyakori kódrészletek.

Az űrlapokat a legkönnyebben a Layout & Styles bővítménnyel stílusozhatod, és ha ismered a CSS-t, a **Haladó CSS** lehetőség is segít (lásd: [Stílusbeállítások](https://hub.hellowp.io/hu/plugins/ninja-forms-style/stilusok/)). Ha viszont pszeudoosztályokra (például `:hover`, `:focus`) van szükséged, vagy egyszerűen magad szeretnél CSS-t írni a témádba, ez a fejezet megmutatja, milyen osztály- és azonosítónevek vannak az űrlapelemeken.

## Egy mező HTML-szerkezete

Minden mezőt egy tároló vesz körül. A szerkezet egy egysoros szövegmezőnél így néz ki (a `{mezőtípus-név}` a mező típusától, a `{mező_id}` a mező azonosítójától függ):

```html
<div class="nf-field-container {mezotipus-nev}-container  label-above">
  <div class="nf-before-field">
    <nf-section></nf-section>
  </div>
  <div class="nf-field">
    <div id="nf-field-{mezo_id}-wrap" class="field-wrap {mezotipus-nev}-wrap" data-field-id="{mezo_id}">
      <div class="nf-field-label">
        <label for="nf-field-{mezo_id}" class="">Egysoros szöveg</label>
      </div>
      <div class="nf-field-element">
        <input id="nf-field-{mezo_id}" name="nf-field-{mezo_id}" class="ninja-forms-field nf-element" type="text" value="">
      </div>
    </div>
  </div>
  <div class="nf-after-field">
    <nf-section>
      <div class="nf-error-wrap nf-error"></div>
    </nf-section>
  </div>
</div>
```

A szerkezet részei:

| Elem | Szerepe |
|---|---|
| `nf-field-container` | A fő doboz, ami a mező minden kimenetét körülveszi. |
| `nf-before-field` | A mező előtti tartalom helye. |
| `nf-field` | Maga a mező. |
| `nf-after-field` | A mező utáni tartalom helye, például a hibaüzenetek. |
| `field-wrap` | A címkét és a beviteli elemet körülvevő doboz. |
| `nf-field-label` | A címke. |
| `nf-field-element` | A beviteli elem tárolója. |

Az `nf-section` HTML-címke a működés belső eleme, ezzel nem kell foglalkoznod.

## Szelektorok az általánostól a legpontosabbig

Négy elemet stílusozhatsz, és mindegyiket háromféle pontossággal: minden mezőre, egy mezőtípusra vagy egyetlen mezőre. A mezőtípus nevét az osztálynévben a típus neve adja (például szövegmezőnél `textbox`), az egyedi mezőt a mező azonosítója (például `12`).

### Mezőtároló

```css
/* Minden mező tárolója */
.nf-field-container {
  /* saját stílusok */
}

/* Egy mezőtípus tárolója, például: .textbox-container {} */
.mezotipus-nev-container {
  /* saját stílusok */
}
```

### Mező körüli doboz

```css
/* Minden mező doboza */
.field-wrap {
  /* saját stílusok */
}

/* Egy mezőtípus doboza, például: .textbox-wrap {} */
.mezotipus-nev-wrap {
  /* saját stílusok */
}

/* Egy konkrét mező doboza, például: #nf-field-12-wrap {} */
#nf-field-MEZO_ID-wrap {
  /* saját stílusok */
}
```

### Címkék

```css
/* Minden címke */
.field-wrap label {
  /* saját stílusok */
}

/* Egy mezőtípus címkéje, például: .textbox-wrap label {} */
.mezotipus-nev-wrap label {
  /* saját stílusok */
}

/* Egy konkrét mező címkéje, például: #nf-field-12-wrap label {} */
#nf-field-MEZO_ID-wrap label {
  /* saját stílusok */
}
```

### Beviteli elemek

```css
/* Minden beviteli elem */
.ninja-forms-field {
  /* saját stílusok */
}

/* Egy mezőtípus beviteli eleme, például: .textbox-wrap .ninja-forms-field {} */
.mezotipus-nev-wrap .ninja-forms-field {
  /* saját stílusok */
}

/* Egy konkrét mező beviteli eleme, például: #nf-field-12-wrap .ninja-forms-field {} */
#nf-field-MEZO_ID-wrap .ninja-forms-field {
  /* saját stílusok */
}
```

## Amire figyelj

- Az általános szelektorok a Ninja Forms **minden** kimenetére érvényesek, a HTML-mezőkre és a vízszintes vonalakra is. Nem biztos, hogy egy jelölőnégyzetnek 100% szélességet, vagy egy vízszintes vonalnak 100 képpont magasságot szeretnél adni. Az általános szelektorba csak olyan szabályt tegyél, amit tényleg mindenre rá akarsz tenni.
- A Markáns stílusokat is felülírhatod így, de a legördülő menük, a rádiógombok és a jelölőnégyzetek külön szabályokat használnak, ezért ezek stílusozásához más szelektor kellhet.

## Kódrészletek

A „Minden, csillaggal jelölt mező kötelező” üzenet elrejtése:

```css
.nf-form-fields-required {
  display: none;
}
```

A kötelező mezők csillagának elrejtése:

```css
.ninja-forms-req-symbol {
  display: none;
}
```