Gestaltung Textfeld

    Hallo,


    ich habe folgende Frage:


    Wie kann ich am einfachsten einem (oder auch mehreren) Textfeld(ern) ein PNG/GIF als Hintergrund mitgeben?
    Ich habe schon einiges versucht, aber es führte nicht zum gewünschten Ergebnis.


    Ich möchte zum Einen, den Textfeldern ein leicht geändertes Design mitgeben und bei :focus die Farbe ändern.


    Wenn ich dem Formular (beispielsweise 4 inputs und 1 textarea) in der CSS folgendes mitgebe:

    Code
    input:focus, textarea:focus {
    background-color: #4BB5ED;
}
#contactform input, textarea  {
	background:#fff url(images/text.gif) no-repeat ;
}


    Dann setzt er zwar das Bild in den Hintergrund, lässt aber die Farbe bei :focus weg.
    Zudem nimmt er den Button auch gleich mit. Muss ich alle inputs einzeln ansprechen, oder kann ich den Button irgendwie ausschließen?


    Habt ihr eine Lösung?


    *EDIT


    Hab gerade überlegt ob es vielleicht daran liegen kann, wenn der Bereich des Bildes im Textfeld nicht transparent ist, dann auch kein :focus angezeigt werden kann!?

    Ich Trottel habe gerade den Text gelöscht ... und nochmal
    Edit: und gerade gemerkt, dass ich auch hätte rückgängig machen können :evil:


    Was :focus angeht ist dein Edit fast richtig. Das Hintergrundbild liegt über der Hintergrundfarbe, überdeckt sie also. Daher legt sich auch die Hintergrundfarbe von :focus dahinter.
    Du kannst dies umgehen, indem du statt background-color, background schreibst. Dann wird der Hintergrund komplett in der Farbe gemacht und alles, was vorher deklariert wurde, wird überschrieben. Dafür musst du allerdings entweder die :focus Deklaration über der anderen schreiben oder auch ihr die ID voranstellen:

    Code
    #contactform input:focus, textarea:focus {
    background: #4BB5ED;
}
#contactform input, textarea  {
   background:#fff url(images/text.gif) no-repeat ;
}


    Ja, du kannst den Button ausschließen, das wird aber noch nicht von allen Browsern unterstützt:

    Code
    input:not([type="button"]) {
   /* ... */
}

    (Falls du dazu Fragen hast, dann frag)
    Als Alternative kann man erst Eigenschaften für alle input setzen und diese dann für z.B. die buttons wieder zurücksetzen:

    Code
    input {
    color: #F00;
}
input[type="button"] {
    color: #000;
}

    ok, das mit :focus funktioniert jetzt, wie simpel. :wink:


    Den Button rauszunehmen geht auch (ich habe es mit der Alternative gemacht, wegen der höheren Browser-kompatibilität).
    Vielen Dank!!! :)


    Bzgl. des anderen codes aber noch eine Frage:


    wird

    Code
    input:not([type="button"]) {
   /* ... */
}


    an die anderen angehängt oder unterhalb extra ausgewiesen?
    Weil dann wäre es ja das gleiche wie deine Alternative, das ich quasi zwei getrennte Anweisungen habe.

    Wenn du irgendwelche Styles hast, die für alle input-Felder außer button sein sollen, kannst du das nutzen und brauchst dafür dann auch nur den einen Anweisungsblock.
    Dieses :not([type="button"]) gilt für alle input Felder, außer die mit type="button".


    Es kommt also auf die jewilige Situation an, ob du noch einen zweiten Anweisungsblock brauchst, der für alle gilt.

    Zitat von "Sören"

    Dieses :not([type="button"]) gilt für alle input Felder, außer die mit type="button".


    Und funktioniert im IE nicht :D Aber matches (also [Attribut="Wert"]) gehen schon ab IE6 :)

    Jetzt klar. Funktioniert alles. Wunderbar. :D


    Zitat von "Sarkkan"


    Und funktioniert im IE nicht :D Aber matches (also [Attribut="Wert"]) gehen schon ab IE6 :)


    Die IE (zumindest die älteren Versionen) sind eh schon nervig genug mit den ganzen sonderanweisungen die ich extra für deren Kompatibilität angeben muss...


    Wird Zeit, dass die jetzt mal voranmachen... facebook hat den IE6 ja schon abgeknallt.


    Wie macht ihr das mit der Kompatibilität? Versucht ihr grundsätzlich so vielen Browsern wie möglich Zugang zu "gewähren" oder lasst ihr so sachen wie IE6 und co links liegen da die meisten mit chrome, firefox online gehen?

    Zitat von "Milano"

    Wird Zeit, dass die jetzt mal voranmachen... facebook hat den IE6 ja schon abgeknallt.

    Übrigens nicht nur Facebook :P
    Selbst Microsoft hat genug von ihrem guten Stück und leiten dessen Untergang ein :D Link zum IE6 Countdown

    Zitat von "Milano"

    Wie macht ihr das mit der Kompatibilität? Versucht ihr grundsätzlich so vielen Browsern wie möglich Zugang zu "gewähren" oder lasst ihr so sachen wie IE6 und co links liegen da die meisten mit chrome, firefox online gehen?

    Naja.. also Privat habe ich den IE <8 abgeschossen. (IE kleiner wie Version 8 )
    Ein Besucher mit diesem Browser erhält von mir einen großen, roten, fixierten(also legt sich über meine Seite) Div-Container, der ~30% meiner Seite einnimmt, aber durch ein X oben Rechts schließbar ist. Das schließen hält aber nur so lange, bis man irgendeinen Link anklickt. Naja, der Inhalt der Box ist aber interessanter, ich verlinke dort zu einer meiner Seiten (ohne Box xD), auf denen ich erkläre wieso man den IE <8 nicht verwenden sollte, biete einen Link zur Aktuellsten Version und zu Browser-Alternativen an.
    Aber Beruflich darf ich das leider nicht :/ Da muss ich ein Design erstellen, welches ohne große Sonderregelungen in jedem Browser richtig läuft, auch im IE6.. :/
    Ergo werden dort solche Spielereien nicht verwendet, sondern man arbeitet über Klassen, a la input.submit o.Ä.

    :D Klasse Grafik! so so... die Chinesen... :)



    Hab jetzt aber nochmal eine kurze Frage zum eigentlichen Thema:


    Ich habe jetzt das Textfeld mit einem .gif hinterlegt.
    Allerdings liegt jetzt immer der erste Buchstabe jeder Reihe sowie die komplette erste Reihe auf dem Rahmen vom Bild.


    What to do???

    Ja, hab ich schon...


    dann verschiebt sich das ganze Feld inklusive der Texteingabe. :?


    Dann hab ich das gleiche Problem ein Pixel nebendran. :wink:


    kann ich den Background noch irgendwie anders verschieben?


    *EDIT:


    STOPP! Alles zurück!!! Hatte padding eine Anweisung zuweit oben reingepackt... 8)


    Jetzt passt's :wink:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden