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

# Teemaeditori - Syöttökentät

> Määritä verkkokaupan lomakkeiden syöttökenttien värit, reunan paksuus ja kulmien pyöristys.

<Frame caption="Teemaeditori > Syöttökentät">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-inputs.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=fa6ab657475f4f8cebc68fd5ba388428" alt="Syöttökenttien asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-inputs.webp" />
</Frame>

Syöttökenttien paneeli ohjaa verkkokaupan tekstikenttien, pudotusvalikoiden ja muiden lomakesäätimien ulkoasua — kassalomakkeet, hakupalkit ja määrävalitsimet perivät kaikki nämä tyylit.

## Värit

| Asetus | Oletus    | Kuvaus                                  |
| ------ | --------- | --------------------------------------- |
| Tausta | `#FFFFFF` | Syöttökenttien täyttöväri.              |
| Reuna  | `#E4E6EB` | Syöttökenttien reunaväri oletustilassa. |

## Reuna

| Asetus            | Tyyppi      | Oletus | Vaihteluväli | Kuvaus                                                                |
| ----------------- | ----------- | ------ | ------------ | --------------------------------------------------------------------- |
| Paksuus           | Liukusäädin | 1 px   | 0–4 px       | Syöttökenttien reunan leveys. Arvolla 0 kentät ovat reunattomia.      |
| Kulmien pyöristys | Liukusäädin | 6 px   | 0–40 px      | Kuinka pyöristettyjä kentän kulmat ovat. Arvo 0 antaa terävät kulmat. |

## CSS-muuttujat

<CodeGroup>
  ```css CSS-muuttujat theme={null}
  :root {
    --storefront-input-background-color: #FFFFFF;
    --storefront-input-border-color: #E4E6EB;
    --storefront-input-border-width: 1px;
    --storefront-input-border-radius: 6px;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Painikkeet" icon="square" href="/docs/fi/sales-channels/online-store/theme-editor/settings/buttons">
    Määritä painikkeiden tyylit.
  </Card>

  <Card title="Kalenteri" icon="calendar" href="/docs/fi/sales-channels/online-store/theme-editor/settings/calendar">
    Mukauta vuokra-ajan päivämäärävalitsinta.
  </Card>
</CardGroup>