✔ Unterscheidung Buttons und Eingabefelder

[Muckel1986]

Guten Abend zusammen,

bin zurzeit dabei für ein kleines Projekt ein Formular zu erstellen. Bei jenem habe ich auch ein wenig mit css gearbeitet, damit es ordentlicher ausschaut. Soweit klappt das auch und bei den input Eingaben wird auch das Hintergrundbild und der Rahmen angezeigt. Doch leider wird jenes bei den "Buttons" auch angezeigt, was so aber nicht sein soll.

Im css-Code handelt es sich um diesen Bereich:

#mitte input {
	margin:0.5em;
	background-image: url(Grafiken/allgemeines/karo.png);
	border:0.05em solid #000000;}

Im xhtml-Code handelt es sich um diese "Bereiche":

<input type="text" name="test" id="test" value="" tabindex="" />

<input type="submit" value="speichern" /> <input type="reset" value="Abbrechen" />

Wie kann man diese zwei Elemente unterscheiden? Denn so, wie es aktuell aussieht, kann/sollte es nicht bleiben. Andersrum sind die input-Eingaben so aber ansehnlicher als die standard Elemente. Zu sehen ist das ganze hier.

Liebe Grüße
Muckel/Tobias

 

[Maik]

Hi,

entweder nutzt du den ID-Bezeichner des Elements (bzw. einen Klassenbezeichner bei mehreren <input type=text>-Elementen):

#mitte input {
	margin:0.5em;
	border:0.05em solid #000000;}
#mitte input#test {
	background-image: url(Grafiken/allgemeines/karo.png);}

oder greifst auf den Attribut-Selektor zurück (Browserunterstützung vorausgesetzt):

#mitte input {
	margin:0.5em;
	border:0.05em solid #000000;}
#mitte input[type=text] {
	background-image: url(Grafiken/allgemeines/karo.png);}

mfg Maik

 

[Muckel1986]

Guten Abend zusammen,

weißt Du zufällig, welche Browser die zweite Variante unterstützen? Bei meinen Browsern: Firefox (3.5.4), Opera (1750) und dem neuen Internet Explorer () klappt es zumindest. Denn die Seite soll recht Barriere arm werden.

Laut dem W3C ist dies sogar valid

Danke Dir für deine Hilfe!

 

[Maik]

Mit Ausnahme des betagten IE6 wird der Attribut-Selektor von allen standardkonformen Browsern interpretiert.

Und für den IE6 gibt es da ie7-js, um ihm auf die Sprünge zu helfen. Ansonsten müsstest du auf die erste Variante mit dem ID- oder Klassenbezeichner zurückgreifen.

mfg Maik