✔ Einfärben Textfeld bei Focus?

T

tanjahouse

Mitglied
Guten Morgen liebe Forenmitglieder, habe eine Frage zu CSS.

Ich habe ein formular mit ca. 10 Textfeldern, ist es möglich das Feld nur wenn es aktiv ist , b.z.w wenn der Focus drauf ist einzufärben ?

Es sollte so sein das es normal weiss ist, jetzt klick ich mit der maus drauf dann sollte es gelb sein und beim verlassen auch gelb bleiben ?

Danke und Gruss Tanja
 
Hi,

damit sich die Regel nicht auf alle einzelne <input>-Elementtypen, sondern ausschließlich auf das einzeilige Eingabefeld (<input type="text">) bezieht, sollte sie mittels des Attributselektors spezifiziert werden:
CSS: 
input[type=text]:focus{
  background:yellow;
}

mfg Maik
 
Hallo queicherius, habe bisschen probleme beim einbinden des ganzen.

Und zwar habe ich eine css erstellt mit namen adressen.css

die sieht so aus:
PHP: 
input:focus, textarea:focus {
    background-color: yellow;
}

in meiner php seite habe ich dann folgenden code:
PHP: 
<link href="adressen.css" rel="stylesheet" type="text/css" />

aber irgendwie klappts net so
 
Sollte eigentlich soweit funktionieren. Mit welchem Browser hast du dies überprüft?

mfg Maik
 
Hallo, ja alles im selben Ordner drin, getestet mit ie 8.

Habs mal so versucht :
PHP: 
<STYLE>.mystyle2 { BACKGROUND:#cccccc;}</STYLE>

dieses im quelltext der php datei funktioniert aber das mit dem css nicht ?
 
Dann übergibst du die Seite offensichtlich nicht im standardkonformen Modus ("Almost Standards Mode"), da sich der IE8 im "Quirks Mode" wie seine Vorgängerversionen (einschließlich IE7) verhält, die die :focus-Pseudoklasse bei diesen Elementtypen nicht interpretieren.

Besitzt denn das HTML-Dokument eine Doctype-Deklaration? Wenn ja, wie lautet diese?

Wenn nicht, füge mal einen dieser vier Doctypes vor dem <html>-Tag ein:
  • HTML 4.01:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Falls du hierbei die Vorgänger des IE8 berücksichtigen möchtest, empfehle ich dir zusätzlich http://code.google.com/p/ie7-js/:

Code: 
<link href="adressen.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->


mfg Maik
 
Super hat geklappt !!

Das wars
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Vielen lieben dank und euch allen einen schönen Sonntag noch.

Liebe Grüsse
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück