input button per externe CSS Datei ansprechen

[Gast]

Hallo,

ich habe eine extrene style.css Datei indem alle wichtige angaben bezüglich Rahmen, Schriftgröße usw abgespeichert sind.

"....
input { border:solid 1px #000000; }
...."

Auf meine Webseite gibt es aber zwei verschiedene Arten von Input Felder. Zum einen zB:

<input type=button value="Zurück" onClick="history.back()">

soweit, so gut. Wird alles wunderbar mit einem feinen schwarzen Rahmen angezeigt wie es sein soll. ABER: es gibt noch die andere Variante:

<input type=image value="Bestellen" src="bild.gif">

also eine Input Button mit Bild! dies sollte keine Rahmen haben. Ich habe leider keine möglichkeit den Problem inerhalb des <input> Tags per " style="border:none;" " zu lösen da alle Buttons automatisch generiert werden. Was ich bräucht wäre eine Tipp wie ich in meine Externe CSS Datei die zwei unterschiedliche Input Varianten ansprechen kann. Ich denke dabei analog zur a und a:hove an sowas wie input:button , input:image

wäre für schnelle Hilfe dankbar!

Gruß

Daniel

[Fabian St.]

Hi!

"....
input { border:solid 1px #000000; }
...."

Auf meine Webseite gibt es aber zwei verschiedene Arten von Input Felder. Zum einen zB:

<input type=button value="Zurück" onClick="history.back()">

soweit, so gut. Wird alles wunderbar mit einem feinen schwarzen Rahmen angezeigt wie es sein soll. ABER: es gibt noch die andere Variante:

<input type=image value="Bestellen" src="bild.gif">

also eine Input Button mit Bild! dies sollte keine Rahmen haben. Ich habe leider keine möglichkeit den Problem inerhalb des <input> Tags per " style="border:none;" " zu lösen da alle Buttons automatisch generiert werden. Was ich bräucht wäre eine Tipp wie ich in meine Externe CSS Datei die zwei unterschiedliche Input Varianten ansprechen kann. Ich denke dabei analog zur a und a:hove an sowas wie input:button , input:image

Diese Möglichkeit gibt es und sie würde so aussehen:

  
input[type=image] {  
                     border: none  
}  

Siehe hierzu auch: http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte

Leider unterstützt der IE 6.0 diese Formatierung nicht, da er sich nicht an die CSS 2.1 Vorgaben des W3C hält. Daher müsstest du wohl auf Klassen umsteigen oder du findest eine Möglichkeit, sog. Descending Selectors zu verwenden (abhängig von der HTML-Struktur).

Grüße,
Fabian St.

[Vinzenz Mai]

Hallo Fabian,

aus

Ich habe leider keine möglichkeit den Problem inerhalb des <input> Tags per " style="border:none;" " zu lösen da alle Buttons automatisch generiert werden.

schliesse ich, dass der OP

Daher müsstest du wohl auf Klassen umsteigen

dies auch nicht kann. Deswegen habe ich darauf verzichtet, diese Möglichkeit zu erwähnen und nur

oder du findest eine Möglichkeit, sog. Descending Selectors zu verwenden (abhängig von der HTML-Struktur).

vorgeschlagen :-)

Freundliche Grüße

Vinzenz, der zu langsam war

[Ashura]

Hallo Gast.

Was ich bräucht wäre eine Tipp wie ich in meine Externe CSS Datei die zwei unterschiedliche Input Varianten ansprechen kann. Ich denke dabei analog zur a und a:hove an sowas wie input:button , input:image

Möglichkeit 1:

Verpasse den verschiedenen input-Elementen aussagekräftige Klassen, welche du dann entsprechend abweichend formatierst.

Möglichkeit 2:

Nutze die Attribut-Selektoren, diese sind seit CSS2 verfügbar. (Ja, der IE <= 6.0 beherrscht diese nicht.)

Der Sauberkeit wegen rate ich zur zweiten Möglichkeit.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Vinzenz Mai]

Hallo Daniel,

Was ich bräucht wäre eine Tipp wie ich in meine Externe CSS Datei die zwei unterschiedliche Input Varianten ansprechen kann. Ich denke dabei analog zur a und a:hove an sowas wie input:button , input:image

CSS kennt sowas, das sind die attributbedingten Selektoren. Es gibt einen klitzekleinen Haken bei diesen Selektoren: Du entdeckst ihn, wenn Du Dir die Browserunterstützung anschaust.

Hast Du nicht die Möglichkeit, über den Kontext, d.h. über verschachtelte Elemente, einen geeigneten Selektor zu finden, der auch von einem bestimmten weit verbreiteten Browser (alle bisherigen Versionen) verstanden wird?

Weiterhin rate ich Dir, Attributwerte stets in Anführungszeichen zu setzen.

Freundliche Grüße

Vinzenz

[Gast]

vielen Dank euch allen :)

Daniel