Schriftgrösse Kontaktformular / Theme FINANCE M4

[inno]

Hallo Tommy,
ich baue gerade im Theme FinanceM4 ein Formular. Dort wird dann auf die eingestellte Schriftgröße "Text" zugegriffen.
Kann ich NUR für das Formular die Schriftgrösse einzeln im CCS ändern - wenn ja wie?
Ich verwende bei den anderen Seiten die Schriftgrösse "Text" und dort passt es gut - wenig Inhalt, grosse Schrift.
Beim Formular bräuchte ich den Font halt kleiner. Weisst du was ich meine? Screeshots anbei.

[Tommy Herrmann]

Moin Inno,

also ich habe das mal hier eines nach dem anderen aufgeschrieben:

1) input = Eingabefeld-Textgröße
2) input::placeholder = der Platzhalter vom Eingabefeld (die Schrift die da schon steht, wie "Name")
3) textarea = Eingabetext-Textgröße
4) textarea::placeholder = der Platzhalter vom Eingabetext

Diese Selektoren kopierst Du in den (rechten) Bereich "CSS Editor" vom "Code Editor" des Blocks mit dem Formular. Ich habe jetzt als Beispiel 0.8rem eingetragen wobei 1rem (Root EM) die Standard-Größe aus Deiner CSS entspricht, 0.8 ist eben um 20% kleiner. Du könntest natürlich ebenso Angaben in Pixeln, also z.B. 12px eintragen.

Code: Alles auswählen

input {
  font-size: 0.8rem;
}
input::placeholder {
  font-size: 0.8rem;
}
textarea {
  font-size: 0.8rem;
}
textarea::placeholder {
  font-size: 0.8rem;
}

Du könntest also die Schriftgröße vom Platzhalter auch anders machen als jene vom Eingabetext.

... dieser Syntax wäre genauso richtig, Du kannst also bei gleicher Größe für alle Selektoren ebenso alles in eine Anweisung, getrennt durch Kommata, schreiben:

Code: Alles auswählen

input, input::placeholder, textarea, textarea::placeholder {
  font-size: 0.8rem;
}

[inno]

Hallo Tommy, danke das funktioniert.
Wie passe ich die anderen Selektoren an:
Selectfeld (Auswahlfeld)
Felder zum Häckchen setzen
Hier habe ich immer noch die "alte" Größe.

Danke dir und Grüße

[Tommy Herrmann]

Moin,

na dann machst Du dort ebenso.

Für die Checkbox:

Code: Alles auswählen

label {
  font-size: 0.8rem;
}

... für das Auswahlfeld (select):

Code: Alles auswählen

select {
  font-size: 0.8rem;
}

[inno]

Label funktioniert! Select leider nicht! Heisst das anders?

[inno]

bzw. der Platzhalter im Select-Feld ...

[Tommy Herrmann]

dann musst Du mal die Seite zeigen. Bei mir geht das.

[inno]

Schaum mal ...

[Tommy Herrmann]

da fehlt das Komma nach dem select,

[inno]

Geht mit Komma auch nicht! ;-(

[Tommy Herrmann]

... ich muss eigentlich diese Seite mit dem Formular "online" sehen, damit man im Quelltext sehen kann warum.

Schreibe das mal nochmals alles einzeln in den Bereich "CSS Editor" und nimm Deine zusammenhängende Anweisung (mit den Kommata) raus.

also so:

Code: Alles auswählen

input {
  font-size: 0.8rem;
}
input::placeholder {
  font-size: 0.8rem;
}
textarea {
  font-size: 0.8rem;
}
textarea::placeholder {
  font-size: 0.8rem;
}
label {
  font-size: 0.8rem;
}
select {
  font-size: 0.8rem;
}

[inno]

Geht leider auch nicht.
Hier der Link zur Testseite.
https://7ycz3v6rpe.mobirisesite.com/

[Tommy Herrmann]

nimm das "select" aus der CSS wieder raus und schreibe stattdessen:

Code: Alles auswählen

.jq-selectbox__select {
   font-size: 0.8rem;
}

.jq-selectbox {
   font-size: 0.8rem;
}

[inno]

Funktioniert!
Und was muss ich noch für die Schriftgrösse der Auswahlfelder in der Selectbox anpassen?

[Tommy Herrmann]

na das sollte die zweite Anweisung doch erledigen - diese hier:

Code: Alles auswählen

.jq-selectbox {
   font-size: 0.8rem;
}

[inno]

Ich danke dir vielmals für die tolle Unterstützung!
Passt alles!

[Tommy Herrmann]

sonst versuche es mal mit dem li Tag zusätzlich:

Code: Alles auswählen

.jq-selectbox li{
   font-size: 0.8rem;
}