display: block für Input-Felder - Warum keine volle Breite?

[dodo123]

Ich möchte erreichen, dass meine Input-Felder immer die volle Breite des umgebenden Elements einnehmen. Bei den Links ist das auch gar kein Problem, aber warum funktioniert es bei den Input-Feldern nicht?
Ich habe überlegt, ob es an meiner normalize.css liegt, konnte aber nichts entdecken.
Ich benutze die normalize.css von http://necolas.github.io/normalize.css/
Oder hat das nichts mit der normalize.css zu tun und verhalten sich Input-Felder irgendwie anders?

hier mal der quelltext von dem Formular:

<form id="login" class="" method="get" action="#">
  <input type="text" name="bn">
  <input type="password" name="pw">
  <button>login</button>
</form>

Grüße

Dodo

 

[tombe]

1) Was ist hier das "umgebende Element" und wie breit ist dieses?

2) Ich kenne die normalize.css nicht, wie sehen hier die entsprechenden Angaben aus?

 

[dodo123]

Grundsätzlich befindet sich das Form-Element in einer Sidebar. Die Sidebar selbst hat keinen festen Wert und nimmt die volle Breite ein. Das Formular mit der id="login" hat ebenfalls keinen festen Wert und ist mit display: block definiert. Aber sobald ich die Input-Felder mit display: block definiere dehnen sie sich nicht über die volle Breite aus. Sie müssten aber doch eigentlich die volle Breite einnehmen, wenn keine fixen Werte angegeben sind. Ich habe die Links in der Sidebar z. B. mit display: block definiert, ohne eine fixe Breite anzugeben und es funktioniert ohne Probleme. Nur bei Input-Feldern klappt das nicht.
Habe das Stylesheet nach dem Mobile-First-Prinzip aufgebaut, deswegen hat das Layout keine feste Breite, da es eh nur erstmal die Mobile Ansicht ist, für die kleinsten Geräte.

An der normalize.css liegt es nicht, habe das Stylesheet mal deaktiviert.

Nehmen Input-Felder irgendwie eine Sonderrolle im CSS ein, bzw. ist die Darstellung vielleicht vom Betriebssystem abhängig? Habs jetzt mal sicherheitshalber im Chrome getestet. Da sieht es genauso aus.

Edit: So, hab mal etwas recherchiert. Anscheinend brauchen Input-Felder immer eine Breitenangabe, egal ob px, % oder em. Komisch.

Für alle, die das gleiche Problem haben:
Habe nun dem Universalselektor ( * ) die Eigenschaft box-sizing: border-box gegeben, dann die Breite vom Input-Feld auf 100% gesetzt, somit bleibt es schön flexibel.

 

[hela]

Hallo,

das INPUT-Element ist ein ersetzendes Inline-Element (wie z.B. auch IMG oder TEXTAREA) und hat auch ohne die Block-Deklaration eine initiale Breite. Wenn du diese Breite ändern möchtest, dann brauchst du im CSS der WIDTH-Eigenschaft nur den entsprechenden Wert (z.B. 100%) zu geben.

Mehr ist nicht notwendig.

 

[dodo123]

Ok, das mit dem ersetzenden Inline-Element wusste ich noch nicht, gut zu wissen. Mein Problem in dem Zusammenhang war auch eher, dass ich bei der Smartphone-Ansicht einen Abstand zum Rand habe und bei einer Angabe von 100% für das Input-Feld dieser Abstand nicht mehr vorhanden war, bzw. horizontale Scrollbalken entstanden sind. Aber mit der Eigenschaft box-sizing: border-box lässt sich das Problem gut umschiffen.