CSS in Formularen

Hallo,

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

Gruß
Stephan

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...

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

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

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

Danke!

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

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

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.

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:

.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.

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:

.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

.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ß