CSS: input size vorbelegen
bearbeitet von 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](https://twitter.com/SelenIT2/status/1315903268732702720))
> 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:
```css
input[type="text"]:not([size]), input:not([type]):not([size]) {
width: 30ch;
}
```
In Firefox und Safari [geht auch schon](https://caniuse.com/?search=%3Ais)
`input:is([type="text"], :not([type])):not([size])`
Chromia hinken da hinterher.
😷 LLAP
--
*„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“* —@Ann_Waeltin
CSS: input size vorbelegen
bearbeitet von 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](https://twitter.com/SelenIT2/status/1315903268732702720))
> 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`-Attriubt haben. Bitteschön: `input:not([size])`.
Kombiniert mit dem Check auf `type="text` – und, da dies der Default bei nicht gesetztem `type`-Attribut ist:
```css
input[type="text"]:not([size]), input:not([type]):not([size]) {
width: 30ch;
}
```
In Firefox und Safari [geht auch schon](https://caniuse.com/?search=%3Ais)
`input:is([type="text"], :not([type])):not([size])`
Chromia hinken da hinterher.
😷 LLAP
--
*„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“* —@Ann_Waeltin
CSS: input size vorbelegen
bearbeitet von 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](https://twitter.com/SelenIT2/status/1315903268732702720))
> 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`-Attrubt haben. Bitteschön: `input:not([size])`.
Kombiniert mit dem Check auf `type="text` – und, da dies der Default bei nicht gesetztem `type`-Attribut ist:
```css
input[type="text"]:not([size]), input:not([type]):not([size]) {
width: 30ch;
}
```
In Firefox und Safari [geht auch schon](https://caniuse.com/?search=%3Ais)
`input:is([type="text"], :not([type])):not([size])`
Chromia hinken da hinterher.
😷 LLAP
--
*„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“* —@Ann_Waeltin
CSS: input size vorbelegen
bearbeitet von Gunnar Bittersmann@@Linuchs
> Ich probiers mal mit JS
*„Ich probiers mal mit JS“* ist der typische Ansatz aller Entwickler, die von HTML und CSS zu wenig bis gar keine Ahnung haben. ([Beispiel](https://twitter.com/SelenIT2/status/1315903268732702720))
> 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`-Attrubt haben. Bitteschön: `input:not([size])`.
Kombiniert mit dem Check auf `type="text` – und, da dies der Default bei nicht gesetztem `type`-Attribut ist:
```css
input[type="text"]:not([size]), input:not([type]):not([size]) {
width: 30ch;
}
```
In Firefox und Safari [geht auch schon](https://caniuse.com/?search=%3Ais)
`input:is([type="text"], :not([type])):not([size])`
Chromia hinken da hinterher.
😷 LLAP
--
*„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“* —@Ann_Waeltin