CSS: Input-Felder unterschiedlich lang machen

**Jens Pielawa** · 17.02.2011, 12:06

Hallo an alle,
ich habe eher eine CSS-Verständnisfrage. In meinem Formular unter
http://www.sender-zitrone.de/medien-material.htm
gibt es mehrere Imput-Felder. Die ersten vier sollen aber kürzer gemacht werden, da hier nur eine max. zweistellige Zahl eingetragen wird. Die Seite hat die Body-Class "material", und die kürzer darzustellenden Input-Felder habe ich im Formulargenerator mit der CSS-Klasse "anzahl" bedacht.
Allein: die CSS-Syntax zum Verkürzen will mir nach mehreren Versuchen nicht gelingen. Normale Inputs haben diese CSS:

Code:

input[type="text"],
input[type="password"],
textarea
{
	width:60%;
	margin-top:3px;
	padding:2px;
	background-color:#f6f6f6;
	border:1px solid #365c40;
}

Wo und wie quetsche ich extra eine Anweisung für kürzere Inputs ein?

Dazu noch eine andere Frage:
hier steht z. B. als Label "Doppel-CD – Anzahl:", danach kommt das Input-Feld. Kann man hinter einem Input-Feld nicht auch noch etwas schreiben, so dass es dann eher so aussehen würde:
"Doppel-CD: [INPUT] Stück"?

**planepix** · 17.02.2011, 12:11

Hallo Jens,

wenn ich im form.css das ergänze:

Code:

input.anzahl{width:30px;}

dann sind die ersten vier Eingabefelder kürzer.

So gedacht?

**Jens Pielawa** · 17.02.2011, 12:27

Lieber Thomas,
so gedacht und so gemacht:
body.material input.anzahl
Und jetzt habe ich auch dank Dir gemerkt, warum das nicht funktioniert hat: hinter dieser Anweisung hatte ich noch ein Komma stehen...

Sorry...

Bleibt nur noch die zweite Frage mit dem Dahinter-Label.

**dieselboy** · 17.02.2011, 23:54

Zitat von Jens Pielawa

Bleibt nur noch die zweite Frage mit dem Dahinter-Label.

Hallo Jens,

das Pseudoelement :after sollte dir hier weiterhelfen.

Code:

input[type="text"].anzahl:after { content:"Stück" }

Viele Grüße
Daniel

**Jens Pielawa** · 18.02.2011, 06:15

Hallo Daniel,
danke für weiteres Erleuchten, aber das funktioniert bei mir nicht (auch das nachgereichte fehlende Semikolon hilft nicht), weder IE noch FF.

**dieselboy** · 18.02.2011, 12:07

Scheinbar kann :before und :after nur auf Tags angewandt werden, die einen "richtigen" Inhalt umschließen. Das ist mir auch neu...

Dann bleiben dir wohl nur noch die mootools. Erstelle dir ein neues Objekt, z.B.

Code:

var stueck = new Element('span', {
'class': 'einheit',
html: 'Stück'
});

Mit "Inject After" hängst du das oben generierte span-Tag an das input-Feld an. Die mootools-Doku hilft dir weiter.

Nachtrag: Es kann sein, dass du das input noch auf display:block setzen musst, damit du den span per mootools anhängen kannst.

**Jens Pielawa** · 20.02.2011, 18:10

Bevor solche Operationen nötig sind, frage ich mal in die Entwicklerrunde:
wäre eine solche Option nicht eher etwas für kommende Contao-Versionen, dass man also Label, Input-Feld und dann noch nachfolgende eigene Texte im Formulargenerator bestimmen kann? So könnte man hinter Input-Feldern Hilfs- oder Zusatztexte setzen, ohne dass man sich mit Hilfsmitteln den Kopf zerbrechen muss.