CSS: input size vorbelegen

[Linuchs]

Moin,

kleine Frage:

Die meisten meiner Textfelder sind 30 Stellen lang. Ich habe keinen Tipp gefunden, wie das mit CSS grundsätzlich einzustellen wäre. Dies klappt nicht:

input[type="text"] {
  size: 30;
}

Manchmal weicht die Stellenzahl ab:

<input
type      = "text"
name      = "plz"
size      = 10
maxlength = 10
value     = "Hopfengasse"

>

Geht das irgendwie?

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

die width (visuelle Breite) des input-Elements ist eine CSS Eigenschaft. Die size (maximale eingebbare Anzahl von Zeichen) ein Property des Elements. Nach meiner Kenntnis kannst Du das mit CSS nicht beeinflussen.

Es hülfe nur JavaScript.

for (let elem of document.querySelectorAll("input[type=text]")) {
  if (!elem.hasAttribute("size"))
    elem.size=20;
}

Browser, die for..of nicht kennen, brauchen etwas mehr Arbeit mit for(;;) und length. Vorhandensein von for..of ist detektierbar mit Symbol.iterator !== undefined, denn for..of und Iteratoren wurden gemeinsam eingeführt.

Rolf

[Christian Kruse]

Hallo Rolf,

die width (visuelle Breite) des input-Elements ist eine CSS Eigenschaft. Die size (maximale eingebbare Anzahl von Zeichen) ein Property des Elements.

Nein, das ist maxlength. size ist die Länge in Zeichen für Input-Elemente vom type text, search, tel, url, email oder password. Es sollte also width: 20em einem size="20" entsprechen.

Freundliche Grüße,
Christian Kruse

[Der Martin]

Hi Christian,

die width (visuelle Breite) des input-Elements ist eine CSS Eigenschaft. Die size (maximale eingebbare Anzahl von Zeichen) ein Property des Elements.

Nein, das ist maxlength. size ist die Länge in Zeichen für Input-Elemente vom type text, search, tel, url, email oder password. Es sollte also width: 20em einem size="20" entsprechen.

dann habe ich das eben auch verwechselt, und Linuchs möglicherweise auch.
Ich vermute, dass er in Wirklichkeit maxlength gemeint hat.

Live long and pros healthy,
 Martin

[Christian Kruse]

Hallo Martin,

dann habe ich das eben auch verwechselt, und Linuchs möglicherweise auch.
Ich vermute, dass er in Wirklichkeit maxlength gemeint hat.

Das kann ich aus der Frage nicht herauslesen. 30 Stellen heisst für mich: ich kann 30 Zeichen eingeben ohne scrollen zu müssen. Aber das kann auch nur Linuchs beantworten 🤷‍♂️

Aber jetzt gehe ich erstmal eine Runde Fahrrad fahren 😀

Freundliche Grüße,
Christian Kruse

[Gunnar Bittersmann]

@@Christian Kruse

Aber jetzt gehe ich erstmal eine Runde Fahrrad fahren 😀

Pilze sammeln? 🍄

😷 LLAP

[Christian Kruse]

Hallo Gunnar,

Aber jetzt gehe ich erstmal eine Runde Fahrrad fahren 😀

Pilze sammeln? 🍄

Nein. Heute waren Hagebutten dran, aber erst nach der Radfahrt 😉

Freundliche Grüße,
Christian Kruse

[Matthias Apsel]

Hallo Christian Kruse,

Nein. Heute waren Hagebutten dran, aber erst nach der Radfahrt 😉

Ein Männlein steht im Walde …

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

Nein. Heute waren Hagebutten dran, aber erst nach der Radfahrt 😉

Ein Männlein steht im Walde …

Das ging mir auch durch den Sinn 😀

Freundliche Grüße,
Christian Kruse

[Gunnar Bittersmann]

@@Christian Kruse

Ein Männlein steht im Walde …

Das ging mir auch durch den Sinn 😀

Und des Rätsels Lösung ist nicht der Pilz. 😉

😷 LLAP

[Christian Kruse]

Hallo Gunnar,

Ein Männlein steht im Walde …

Das ging mir auch durch den Sinn 😀

Und des Rätsels Lösung ist nicht der Pilz. 😉

Das weiß ich 😉 aber fast alle halten den Pilz dafür. Deshalb war meine Idee, gestern einen Pilz zu fotografieren und heute die Hagebutte. Hat sich als gar nicht so gute Idee rausgestellt: es hat keine 10 Minuten gedauert bis die ersten Kommentare dazu kamen 😂

Freundliche Grüße,
Christian Kruse

[Der Martin]

Hallo,

Hallo Gunnar,

Aber jetzt gehe ich erstmal eine Runde Fahrrad fahren 😀

Pilze sammeln? 🍄

Nein. Heute waren Hagebutten dran, aber erst nach der Radfahrt 😉

da wäre ich dann doch eher für die Pilze. Bevorzugt Maronen, Hallimasche^[1] oder Schirmlinge. Mit Hagebutten kann ich dagegen nichts anfangen.
Aber YMMV.

Live long and pros healthy,
 Martin

---

1. "Wohlschmeckender Speisepilz, aber im Zusammenhang mit Alkohol giftig", wie ich mal am eigenen Leib erfahren habe. Es hat über fünf Jahre gedauert, bis ich wieder ohne inneren Widerwillen Pilze essen konnte. ↩︎

[kai345]

da wäre ich dann doch eher für die Pilze. Bevorzugt Maronen, Hallimasche[^P] oder Schirmlinge. Mit Hagebutten kann ich dagegen nichts anfangen.

Dito. Hagebutten (aber auch Hallimasch; bäh!) braucht man einfach nicht 😉.

Steinpilz, flockenstieliger Hexenröhrling, Pfifferlinge, Wiesenchampignon und vor allem Schopftintling (paniert extrem lecker) hingegen sind ein Muss.

[Der Martin]

n'Abend,

da wäre ich dann doch eher für die Pilze. Bevorzugt Maronen, Hallimasche oder Schirmlinge. Mit Hagebutten kann ich dagegen nichts anfangen.

Dito. Hagebutten (aber auch Hallimasch; bäh!) braucht man einfach nicht 😉.

was hast du gegen den Hallimasch einzuwenden? Ich finde den lecker - mit angedünsteten Zwiebeln und etwas Pfeffer gekocht, Baguettebrötchen dazu. Außer dass man sich den sprichwörtlichen Schnaps hinterher "zur Verdauung" lieber verkneifen sollte.

Steinpilz, flockenstieliger Hexenröhrling, Pfifferlinge, Wiesenchampignon und vor allem Schopftintling (paniert extrem lecker) hingegen sind ein Muss.

Nichts gegen Steinpilze; Pfifferlinge muss ich nicht haben, Hexenröhrling oder Schopftintling kenne ich nicht. Paniert und gebraten kenne ich vor allem die schon genannten Schirmpilze (aka Parasol).

Auch mit 's' geschrieben ist mir ein Pils dann und wann sehr willkommen.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Auch mit 's' geschrieben ist mir ein Pils dann und wann sehr willkommen.

Mir auch mit z geschrieben: Plzeňský. 🍻

Mir wurde letztens gesagt, dass das für den deutschen Markt gebraute Urquell bitterer schmeckt als das in Tschechien vertriebene. Muss ich mir glatt mal zum Vergleich ein paar Flaschen von dort mitbringen, wenn man wieder rüber kann.

😷 LLAP

[Der Martin]

Hallo,

Auch mit 's' geschrieben ist mir ein Pils dann und wann sehr willkommen.

Mir auch mit z geschrieben: Plzeňský. 🍻

die Sorte habe ich konkret noch nicht getrunken, aber ich bin offen für Neues.

Mir wurde letztens gesagt, dass das für den deutschen Markt gebraute Urquell bitterer schmeckt als das in Tschechien vertriebene.

Das kann ich mir sogar sehr gut vorstellen, obwohl die etwas herberen Biersorten eher in der nördlichen Hälfte Deutschlands zuhause sind.

Aber ich war vor einigen Jahren mal in Dänemark, und das dort populäre Faxe-Pils hat mir sehr gut geschmeckt. Bei einer Brauereibesichtigung eben dort wurde auch darauf hingewiesen, dass das aus Dänemark exportierte Faxe-Bier teilweise auf leicht veränderten Rezepturen beruht. Für Deutschland^[1] etwa - gemäß dem deutschen Reinheitsgebot - ohne Zugabe von Mais, der dem Faxe-Pils aber erst den würzigen Geschmack verleiht.

Live long and pros healthy,
 Martin

---

1. Übrigens das einzige Bier, das ich hier in Deutschland bisher in Ein-Liter-Dosen gesehen habe. ↩︎

[Gunnar Bittersmann]

@@Der Martin

die Sorte habe ich konkret noch nicht getrunken, aber ich bin offen für Neues.

Ich sag doch: Wir sollten das nächste SELFHTML-Treffen dort machen, wo’s für alle zentral ist: in Pilsen.

Kulturprogramm wäre natürlich die Besichtigung der Brauerei.

---

Letzte Woche hatte ich mal den direkten Vergleich zwischen dem in Deutschland vertriebenem Grasovka und dem originalen polnischen Żubrówka – schmeckte auch anders: der polnische irgendwie intensiver.

😷 LLAP

[kai345]

Dito. Hagebutten (aber auch Hallimasch; bäh!) braucht man einfach nicht 😉.

was hast du gegen den Hallimasch einzuwenden? Ich finde den lecker - mit angedünsteten Zwiebeln und etwas Pfeffer gekocht, Baguettebrötchen dazu. Außer dass man sich den sprichwörtlichen Schnaps hinterher "zur Verdauung" lieber verkneifen sollte.

Ich trinke eh nichts, daher wäre mir das egal. Ich mag nur dieses schleimige der H. nicht. Früher, als ich noch jung war™ haben wir kiloweise Hallimasch angeschleppt, irgendwann konnte ich sie nicht mehr ohne Würgereiz essen, also seitdem nicht mehr erwünscht.

Steinpilz, flockenstieliger Hexenröhrling, Pfifferlinge, Wiesenchampignon und vor allem Schopftintling (paniert extrem lecker) hingegen sind ein Muss.

Paniert und gebraten kenne ich vor allem die schon genannten Schirmpilze (aka Parasol).

Die gibt es hier (fast?) nicht, dafür die kleinere Verwandschaft Safranschirmlinge. Auch sehr lecker.

Auch mit 's' geschrieben ist mir ein Pils dann und wann sehr willkommen.

Bier und Wein muss nicht sein.

[MudGuard]

Hi,

Steinpilz, flockenstieliger Hexenröhrling, Pfifferlinge, Wiesenchampignon und vor allem Schopftintling (paniert extrem lecker) hingegen sind ein Muss.

Topfschindling mag ich nicht. Die anderen schon. Auch den netzstieligen Hexenröhrling. Und Maronen, Ziegenlippe, Pfefferröhrlinge, Birkenpilz, Rotkappe ...

Paniert und gebraten kenne ich vor allem die schon genannten Schirmpilze (aka Parasol).

geht auch unpaniert.

Die gibt es hier (fast?) nicht, dafür die kleinere Verwandschaft Safranschirmlinge. Auch sehr lecker.

Ja, die schmecken ja fast genauso, obwohl sie sich beim Anschneiden gelb färben.

Waldchampignons, Perlpilze (NICHT mit Pantherpilz verwechseln!!!), Violetter Rötelritterling, Violetter Schleierling, Violetter Lacktrichterling, Nebelgrauer Trichterling, Reherl, Blutreizger...

Oder (leider nicht in meinem Revier): Goldröhrling, Habichtspilz, Semmelstoppelpilz, Totentrompeten, ...

Bier und Wein muss nicht sein.

Bier nicht (Ausnahme: Stout vom Faß), Wein schon!

cu,
Andreas a/k/a MudGuard

[Matthias Apsel]

Hallo MudGuard,

Schopftintling (paniert extrem lecker) hingegen sind ein Muss.

Topfschindling mag ich nicht.

Hat dieses Verdrehen auch einen tieferen inhaltlichen Sinn?

Bis demnächst
Matthias

[MudGuard]

Hi,

Schopftintling (paniert extrem lecker) hingegen sind ein Muss.

Topfschindling mag ich nicht.

Hat dieses Verdrehen auch einen tieferen inhaltlichen Sinn?

nö, so hieß der bei meinen Geschwistern und mir schon, als wir noch einige Jahrzehnte jünger als heutzutage waren ...

cu,
Andreas a/k/a MudGuard

[Matthias Apsel]

Hallo MudGuard,

nö, so hieß der bei meinen Geschwistern und mir schon, als wir noch einige Jahrzehnte jünger als heutzutage waren ...

Es hätte ja auch sein können, dass er wirklich die Töpfe schindet, weil er vielleicht eine intensiv-agressive Färbung erzeugt.

Bis demnächst
Matthias

[MudGuard]

Hi,

Es hätte ja auch sein können, dass er wirklich die Töpfe schindet, weil er vielleicht eine intensiv-agressive Färbung erzeugt.

er vergammelt sehr schnell, und zerfließt dabei zu einer schwärzlichen breiigen Flüssigkeit - die früher angeblich sogar als Tinte(nersatz) verwendet wurde.

cu,
Andreas a/k/a MudGuard

[Matthias Apsel]

Hallo MudGuard,

er vergammelt sehr schnell, und zerfließt dabei zu einer schwärzlichen breiigen Flüssigkeit - die früher angeblich sogar als Tinte(nersatz) verwendet wurde.

Ich hab ihn noch nie gegessen, aber wir hab(tt?)en welche auf dem Schulgelände.

Bis demnächst
Matthias

[Linuchs]

Hallo Martin,

dann habe ich das eben auch verwechselt, und Linuchs möglicherweise auch.

Ich vermute, dass er in Wirklichkeit maxlength gemeint hat.

Nicht ver Weg xelt. Browser-Standard Firefox scheint size=20 zu sein. Ich möchte aber 30, weil viele Werte länger sind als 20 Zeichen monospace und ich den PLatz habe.

maxlength gebe ich jedesmal an, korrespondiert mit der Feldlänge in der Datenbank.

Seltsam: Warum wird beim Datentyp varchar in der DB eigentlich nach der Feldlänge gefragt? Ist die Anzahl der chars trotzdem noch variabel?

Linuchs

[MudGuard]

Hi,

Seltsam: Warum wird beim Datentyp varchar in der DB eigentlich nach der Feldlänge gefragt? Ist die Anzahl der chars trotzdem noch variabel?

ja, sie darf kleiner als der angegebene Wert sein.

Aber nicht größer.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Christian Kruse

Es sollte also width: 20em einem size="20" entsprechen.

Nö, zu breit. In ch (was sich auf die Breite der Zeichen bezieht) kommt’s in etwa hin.

☞ Guckst du.

😷 LLAP

[Linuchs]

Mit CSS ch kommts bei der Schriftart monospace ganz gut hin, macht aber abweichende Angaben HTML size platt.

Ich probiers mal mit JS

[Gunnar Bittersmann]

@@Linuchs

Ich probiers mal mit JS

„Ich probier’s mal mit JS“ ist der typische Ansatz aller Entwickler, die von HTML und CSS zu wenig bis gar keine Ahnung haben. (Beispiel)

Mit CSS ch kommts bei der Schriftart monospace ganz gut hin, macht aber abweichende Angaben HTML size platt.

Du willst also eine CSS(!!)-Regel für welche Elemente angeben? Für Eingabefelder, die kein size-Attribut haben. Bitteschön: input:not([size]).

Kombiniert mit dem Check auf type="text" – und, da dies der Default bei nicht gesetztem type-Attribut ist, dem Check auf kein type-Attribut:

input[type="text"]:not([size]), input:not([type]):not([size]) {
  width: 30ch;
}

In Firefox und Safari geht auch schon
input:is([type="text"], :not([type])):not([size])

Chromia hinken da hinterher.

😷 LLAP

[Linuchs]

an Gunnar,

der typische Ansatz aller Entwickler, die von HTML und CSS zu wenig bis gar keine Ahnung haben.

Oh, ertappt. Ich habe kaum Ahnug von irgendwas und trinke ständig aufgegossenen Kaffee, um dann vom Koffein benebelt im Kaffeesatz zu lesen.

Es ist zum Haareraufen, wie diese Verfahrenstechnik aus dem Mittelalter immer mindestens einen Ton daneben liegt. So wie beim Klavier spielen, das ich auch nicht kann.

Aber mit der Zeit gewöhnte ich mich an schräge Töne und eben auch an etwas schräge Webseiten, solange hinten überhaupt noch was rauskommt.

von Linuchs

[Linuchs]

Hallo Gunnar,

habe JS deaktiviert, dein alternativer Tipp ist auch prima:

[Gunnar Bittersmann]

@@Linuchs

habe JS deaktiviert, dein alternativer Tipp ist auch prima:

Alternativer? Du meinst alternativloser.

JavaScript zum Stylen sollte hier nicht als Alternative in Erwägung gezogen werden.

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Kombiniert mit dem Check auf type="text …

Möglicherweise willst du das aber auch für Eingabefelder anderer Typen (number, password, …) – für alle bis auf Radiobuttons und Checkboxen:

input:not([type="radio"]):not([type="checkbox"]):not([size]) {
  width: 30ch;
}

😷 LLAP

[MudGuard]

Hi,

for (let elem of document.querySelectorAll("input[type=text]")) {
  if (!elem.hasAttribute("size"))
    elem.size=20;
}

Browser, die for..of nicht kennen, brauchen etwas mehr Arbeit mit for(;;) und length.

Ginge das nicht mit

document.querySelectorAll("input[type=text]").forEach(element => 
{
    if (!element.hasAttribute("size")) {
        element.size = 20;
    }
}

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

doch, natürlich. Die forEach Methode lässt sich auf NodeList.prototype auch polyfillen, im Gegensatz zur for..of Schleife.

Rolf

[Linuchs]

Hallo Andreas,

document.querySelectorAll("input[type=text]").forEach(element => 
{
    if (!element.hasAttribute("size")) {
        element.size = 20;
    }
}

Brachte einen JS-Fehler. Wie gut, dass ich übriggebliebene ) nicht wegwerfe. Hatte noch eine in meiner Kruschtelkiste.

Hinten angepappt. Jetzt klappt's. Danke dir.

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Jetzt klappt's.

Schön. Und schon kannst du das JavaScript gleich wieder wegschmeißen.

😷 LLAP

[Gunnar Bittersmann]

@@Rolf B

Es hülfe nur JavaScript. […] Browser, die for..of nicht kennen, brauchen etwas mehr Arbeit mit for(;;) und length.

Auch beim zweiten Satz ist der Konjuktiv angebracht – verbunden mit dem Hinweis, dass man den Aufwand nicht betreiben muss. Es ist OK, wenn die Eingabefelder in alten Browsern eine andere Breite haben als in modernen.

Ergänzung: Man sollte aber dafür sorgen, dass alte Browser das Script mit for … of nicht laden/ausführen und in einen Syntaxfehler laufen.

😷 LLAP

[Der Martin]

Hallo,

Die meisten meiner Textfelder sind 30 Stellen lang. Ich habe keinen Tipp gefunden, wie das mit CSS grundsätzlich einzustellen wäre.

nein, das geht auch nicht. CSS kann auf die Darstellung einwirken, also etwa die Anzeigebreite. Aber das Attribut size betrifft ja eher die Funktion. Das ist mit CSS nicht zu machen.

Dies klappt nicht:

input[type="text"] {
  size: 30;
}

Genau. Es gibt keine CSS-Eigenschaft size, die dem gleichnamigen HTML-Attribut entspräche.

Du kannst das aber mit Javascript machen: Über alle input-Elemente iterieren, nachsehen, ob deren type=="text" ist und dann die size-Eigenschaft entsprechend setzen.
Sollte das Javascript nicht ausgeführt werden, bleibt size eben unbesetzt. Dann gilt die Defaulteinstellung: Keine Begrenzung.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Linuchs

Die meisten meiner Textfelder sind 30 Stellen lang. Ich habe keinen Tipp gefunden, wie das mit CSS grundsätzlich einzustellen wäre.

Sowas ähnliches hatten wir letztens.

😷 LLAP