CSS größer und kleiner Selektor bei Attributen

[T-Rex]

Moin,

ich bastel gerade am Thema "Formulare". Da gibt es natürlich sowas wie Felder (inputs). Diese können eine gewisse Länge haben (maxlength).

Jetzt haben diese Felder eine unterschiedliche Länge. Es gibt kleinere Felder, größere Felder bis hin zu sehr langen Feldern. Aktuell habe ich noch eine einheitliche sichtbare Breite für alle Felder.

Es wäre super genial, wenn ich die Feldbreite je nach maxlength angeben könnte. Sprich, wenn das Feld maximal 16 Zeichen groß ist, soll es 16px groß sein (nur als Beispiel). In meiner Welt würde das ungefähr so aussehen:

input
{
	width: ['maxlength']px;
}

Falls das nicht geht wäre ich auch zufrieden, wenn man eine Range angeben könnte.

input["maxlength<='32'"]
{
	width: 32px;
}

input["maxlength<='16'"]
{
	width: 16px;
}

Falls das alles nicht geht muss ich wohl Selektoren Seitens php schaffen :( - in css wäre es natürlich cooler.

Gruß la coolio T-Rexio

[Gunnar Bittersmann]

@@T-Rex

Es wäre super genial, wenn ich die Feldbreite je nach maxlength angeben könnte.

Du willst sowas in der Art:

input
{
  width: calc(attr(maxlength) * 0.6em);
}

Das geht aber noch in keinem Browser. Irgendwann ist mal angedacht, dass man die attr()-Funktion auch derartig nutzen kann …

Bis dahin müsstest du die Information so im Markup unterbringen, dass sie in CSS genutzt werden kann:

<input maxlength="42" style="--maxlength: 42"/>

input
{
  width: calc(var(--maxlength) * 0.6em);
}

---

Falls das nicht geht wäre ich auch zufrieden, wenn man eine Range angeben könnte.

input["maxlength<='32'"]
{
	width: 32px;
}

input["maxlength<='16'"]
{
	width: 16px;
}

Attributwerte sind Strings. Und Vergleiche auf größer/kleiner sieht CSS nicht vor.

Wenn deine Bereiche aber mit dem Dezimalsystem …

input[maxlength^="1"] selektiert den Bereich von 10 bis 19 (aber auch 1 und 100–199 usw. – das dürfte aber nicht von Belang sein)

input[maxlength^="2"] selektiert den Bereich von 20 bis 29 (aber auch 2 und 200–299 usw. – das dürfte aber nicht von Belang sein)

😷 LLAP

[Matthias Scharwies]

Servus!

Bis dahin müsstest du die Information so im Markup unterbringen, dass sie in CSS genutzt werden kann:

<input maxlength="42" style="--maxlength: 42"/>

input
{
  width: calc(var(--maxlength) * 0.6em);
}

---

So etwas hatte ich auch überlegt, wollte es heute ausarbeiten.

Wenn deine Bereiche aber mit dem Dezimalsystem …

input[maxlength^="1"] selektiert den Bereich von 10 bis 19 (aber auch 1 und 100–199 usw. – das dürfte aber nicht von Belang sein)

input[maxlength^="2"] selektiert den Bereich von 20 bis 29 (aber auch 2 und 200–299 usw. – das dürfte aber nicht von Belang sein)

Auf diese Idee mit dem Teilübereinstimmungs-Attributselektor wäre ich nie im Leben gekommen! Chapeau!

Herzliche Grüße

Matthias Scharwies

[T-Rex]

Vielen Dank an euch beide - das sind wirklich tolle Lösungsideen!

Gruß begeisterter T-Rex