---
title: "CSS in Formularen"
url: "https://www.typo3.net/d/23778-css-in-formularen"
source: "typo3.net"
tags: ["Extensions","Frage"]
created: "2005-04-18"
last_reply: "2005-04-20"
replies: 6
solved: false
page: 1
pages: 1
lang: "de"
---

# CSS in Formularen

Extensions · 6 Antworten · gestartet 2005-04-18

## Eröffnungsbeitrag

**stephan_2** · 2005-04-18 · [Beitrag #1](https://www.typo3.net/d/23778-css-in-formularen/1)

Hallo,

ich suche eine möglichkeit ein Formular mit css zu formatieren.
Kann mir jemand erklären wie das grundsätzlich geht ?

Gruß
Stephan

## Antworten

### [#2](https://www.typo3.net/d/23778-css-in-formularen/2) · laptop24 · 2005-04-18

Prinzipiell geht das genauso, wie bei jedem anderen HTML-Element auch.

Als Tipp: weise jedem Formular-Element eine ID oder Klasse zu. z.B. <input class="username_ipt">

Dann wird im CSS so formatiert:

input.username_ipt { color: #999 }

Feddisch...

### [#3](https://www.typo3.net/d/23778-css-in-formularen/3) · stoun · 2005-04-19

> **laptop24 schrieb:**
>
> Prinzipiell geht das genauso, wie bei jedem anderen HTML-Element auch.
>
> Als Tipp: weise jedem Formular-Element eine ID oder Klasse zu. z.B. <input class="username_ipt">
>
> Dann wird im CSS so formatiert:
>
> input.username_ipt { color: #999 }
>
> Feddisch...

Hi **laptop24**,

ich habe auch so gemacht. Habe nur Probleme mit id oder class für input.

in TypoScript ObjectBrowser habe ich nur das gefunden

```typoscript
tt_content.mailform.20.radioWrap.wrap =
z.B.
```

Wie kann ich HTML für <inpit type"radio"> ändern?

Danke!

### [#4](https://www.typo3.net/d/23778-css-in-formularen/4) · stephan_2 · 2005-04-20

Nee, ich meine folgendes.

ich kann doch über css ein formular folgendes zuweisen.

SELECT {
	font-family: Verdana, Arial, Helvetica;
	font-size: 11px;
	color: #000000;
	background-color:#FFFFFF;
}
TEXTAREA {
	font-family: Verdana, Arial, Helvetica;
	font-size: 11px;
	border:1px solid #000000;
	color: #000000;
	font-weight : normal;
	background-color:#FFFFFF;
}
INPUT {
	font-family: Verdana, Arial, Helvetica;
	font-size: 11px;
	border:1px solid #000000;
	color: #000000;
	background-color:#FFFFFF;
}
.content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
}

wie kann ich nun das feld vor dem input ansprechen ?

Stephan

### [#5](https://www.typo3.net/d/23778-css-in-formularen/5) · stephan_2 · 2005-04-20

Hier die Lösung.

Achtung, wirkt sich jedoch auf alle Tabelle inhalte aus.

TD {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 13px;
}

Vielleicht weis jemand eine Lösung die es mir ermöglicht das ich nur für den Formularen eine class zuweise.

Gruß
Stephan

### [#6](https://www.typo3.net/d/23778-css-in-formularen/6) · stoun · 2005-04-20

> **stephan@sin schrieb:**
>
> Hier die Lösung.
>
> Achtung, wirkt sich jedoch auf alle Tabelle inhalte aus.
>
> TD {
>        font-family: Verdana, Arial, Helvetica, sans-serif;
>        font-size: 13px;
> }

das ist für mich zu hart :)

ich mache so:

1. In Template-Setup z.B.

```typoscript
tt_content.mailform.20.layout = <tr><td class="mailformlabel">###LABEL###</td><td><img src="clear.gif" width=5></td><td class="mailformfeld">###FIELD###</td></tr>
tt_content.mailform.20.COMMENT.layout = <tr><td colspan=3 class="mailformcomment">###COMMENT###</td></tr>
tt_content.mailform.20.REQ.labelWrap.wrap = <p class=mailformrequired>|&nbsp;<span class=req>*</span></p>
```

und dann in CSS kann man für alle Label ein style anlegen:

```css
.mailformcomment {
   font-size: 16px;
   font-weight: bold;
   color: #FD6429;
   padding: 15 0 0 0;
   margin: 0 0 0 0;
}

.mailformrequired {
   margin: 3 0 0 0;
   font-weight: normal;
}


.mailformlabel {
   vertical-align: top;
   padding: 5 0 5 0;
}

.mailformfeld {
   vertical-align: top;
   padding: 5 0 5 0;
}
```

so kann man alle Felder in Mailform mit CSS formatieren.

### [#7](https://www.typo3.net/d/23778-css-in-formularen/7) · Wuchtbrumme · 2005-04-20

Verstehe nicht, wo das Problem liegt.

Du erstellst doch sicher für das Formular mit mailformplus ein separates Template.

In der .css hast Du ja das stehen:

```css
.content { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
font-style: normal; 
font-weight: normal; 
}
```

mach doch einfach noch eine zweite Klasse dazu, meinetwegen so

```css
.formular { SCROLLBAR-BASE-COLOR: #990000;
            SCROLLBAR-ARROW-COLOR: #FF9966;
            font-family:  verdana, arial , sansserif;
            color: #990000;
            background-color: transparent;
            font-size: 10px;
            font-weight: bold;
            border: #FF9966
           }
```

und dann gibst Du einfach bei input oder anderen Formularfeldern class="formular" an.
Das gleiche funktioniert auch bei <TD class="formular">

Gruß

---

Quelle: „CSS in Formularen“, typo3.net, https://www.typo3.net/d/23778-css-in-formularen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.