Hintergrundfarbe beim "INPUT TYPE=IMAGE"

Fragen zu allen Themen rund ums Programmieren außerhalb von phpBB können hier gestellt werden - auch zu anderen Programmiersprachen oder Software wie Webservern und Editoren.
Antworten
Rote Socke
Mitglied
Beiträge: 14
Registriert: 30.09.2006 17:41
Kontaktdaten:

Hintergrundfarbe beim "INPUT TYPE=IMAGE"

Beitrag von Rote Socke »

Ahoi,
irgendwie hab ich seit drei Tagen eine Blockade.
Probier schon alles mögliche.

Ich habe ein Formular, welches auch so aussieht, wie es soll.
Nun möchte ich aber nicht ein normales Submit-Feld haben, sondern dem Style angepasst ein Button.
Das Button ist aber nicht rechtwinklig sondern oval. (PNG-Format mit eben in den Ecken transparente Bereiche).
Mein Problem ist nun, dass die transparenten Bereiche des Buttons mit der Hintergrundfarbe der normalen Input-Felder angezeigt wird.
Sieht nicht sehr schön aus.

Kann mir jemand helfen?

Vorschau unter Testformular

Dort findet ihr auch den Code aus dem Template sowie den dazugehörigen CSS-Abschnitt.

Danke im Vorraus,
bernd
Benutzeravatar
punkface
Mitglied
Beiträge: 3579
Registriert: 12.08.2004 23:37

Beitrag von punkface »

Mit dem CSS Code

Code: Alles auswählen

input {
	border-width: 0;
	background-color: transparent;
}
sollte es wie von dir gewünscht angezeigt werden. Allerdings betrifft das auch alle anderen Input-Elemente wie etwa Eingeabefelder, die sich wiederrum ohne Rand und Hintergrundfarbe schwer ausmachen lassen - sprich: In der Form ungeeignet.

Du könntest zwar mit dem Selektor

Code: Alles auswählen

input[type="image"]
nur Input-Elemente vom Type image ansprechen, damit kommt allerdings der IE nicht zurecht (welch ein Wunder).

Der einfachste Weg wäre also, den Input-Elementen vom Type image eine eigene CSS-Klasse zu geben, und dieser CSS-Klasse die oben genannten Eigenschaften zu zuweisen.

edit:/ Außerdem solltest du den Input Elementen noch einen alternativ Text (alt) zuweisen. Nur für den Fall das Bilder vom Browser nicht geladen oder angezeigt werden können.
Rote Socke
Mitglied
Beiträge: 14
Registriert: 30.09.2006 17:41
Kontaktdaten:

Beitrag von Rote Socke »

Danke!
Habe nun einfach ein Style-Attribut innerhalb des Input-Tags gesetzt:
style="border-width: 0; background-color: transparent;"

Damit funktioniert es nun.
Antworten

Zurück zu „Coding & Technik“