CSS größer und kleiner Selektor bei Attributen

[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