Bei dem Klick in ein Inputfeld den DIV namen ändern

[Juupie]

Hallo,

ich möchte gerne den DIV namen eines INPUT Feldes ändern wenn ein Nutzer in das Feld klickt. Hintergrund ist, das ich die Schrift wenn er im Input feld ist, gerne etwas dunkler und hätte so, das man sie besser sehen kann.

Jemand eine Idee?

Danke

Juupie

[Georg]

Hallo,

ich möchte gerne den DIV namen eines INPUT Feldes ändern wenn ein Nutzer

Verstehe ich glaub ich nicht richtig

in das Feld klickt. Hintergrund ist, das ich die Schrift wenn er im Input feld ist, gerne etwas dunkler und hätte so, das man sie besser sehen kann.

Was hat jetzt das div mit dem inputfeld zu tun?

Jemand eine Idee?

Also du hast ein Inputfeld? Und du möchtest die Schriftfarbe im inputfeld dunkler haben als auf dem rest der Seite?

Dann formatiere doch das inputfeld

[Juupie]

Dann formatiere doch das inputfeld

Ja das Inputfeld hat damit es unauffälliger ist die Schriftfarbe "Grau" mit dem Wort "Suche".
Klickt nun der Nutzer in das Inputfeld soll er seine Suchanfrage aber nicht in "Grau" sondern in "schwarz" eingeben können (besser sichtbar).

Und ich dachte das macht man mit Javascript...

[Take]

Moin,

Ja das Inputfeld hat damit es unauffälliger ist die Schriftfarbe "Grau" mit dem Wort "Suche".
Klickt nun der Nutzer in das Inputfeld soll er seine Suchanfrage aber nicht in "Grau" sondern in "schwarz" eingeben können (besser sichtbar).

Und ich dachte das macht man mit Javascript...

ja, aber nicht so wie du es machen wolltest, sondern so.

Gruß,
Take

[Der Martin]

Hi,

ich möchte gerne den DIV namen eines INPUT Feldes ändern wenn ein Nutzer in das Feld klickt.

was bitte ist der "DIV name eines INPUT Feldes"?

Hintergrund ist, das ich die Schrift wenn er im Input feld ist, gerne etwas dunkler und hätte so, das man sie besser sehen kann.

Also möchtest du in Wirklichkeit die Schriftfarbe eines input-Elements dunkler haben, wenn es den Focus hat? Dazu braucht's kein Javascript.

<input id="username" type="text" name="user" value="Ihr Benutzername">

#username  
 { color: #888;  
   background-color: #CCC;  
 }  
#username:focus  
 { color: #000;  
 }  

Nur mal als Anregung ...

Ciao,
 Martin

[Juupie]

Hallo Martin,

danke für die Anregung, ich habe folgendes probiert:

#r .rapper input, #searchform input{font:14px/25px Helvetica, Arial, sans-serif; height:28px; border:1px solid #cdcdcd; background: #fff url(images/input-field-bg.gif) top left repeat-x; color:#A2A2A2; padding:0 0 0 8px; width:87px !important;}  
#r .rapper input, #searchform input:focus{ color:#000000; }

<div class="rapper">  
<input name="suche" type="text" value="Suche" maxlength="3" onclick="this.select();" autocomplete="off" >  
</div>

Leider ist dann die Farbe "immer" schwarz

Hi,

ich möchte gerne den DIV namen eines INPUT Feldes ändern wenn ein Nutzer in das Feld klickt.

was bitte ist der "DIV name eines INPUT Feldes"?

Hintergrund ist, das ich die Schrift wenn er im Input feld ist, gerne etwas dunkler und hätte so, das man sie besser sehen kann.

Also möchtest du in Wirklichkeit die Schriftfarbe eines input-Elements dunkler haben, wenn es den Focus hat? Dazu braucht's kein Javascript.

<input id="username" type="text" name="user" value="Ihr Benutzername">

#username

{ color: #888;
   background-color: #CCC;
}
#username:focus
{ color: #000;
}

>   
> Nur mal als Anregung ...  
>   
> Ciao,  
>  Martin  
> 

[Gunnar Bittersmann]

@@Juupie:

nuqneH

#r .rapper input, #searchform input{font:14px/25px Helvetica, Arial, sans-serif; height:28px; border:1px solid #cdcdcd; background: #fff url(images/input-field-bg.gif) top left repeat-x; color:#A2A2A2; padding:0 0 0 8px; width:87px !important;}

#r .rapper input, #searchform input:focus{ color:#000000; }

>   
> Leider ist dann die Farbe "immer" schwarz  
  
Die zweite Angabe überschreibt ja auch die erste für den Selektor '`#r .rapper input`{:.language-css}'.  
  
Gern gemachter Fehler: Die Pseudoklasse `:focus`{:.language-css} gilt nur für den Teil nach dem Komma, nicht für den Teil vor dem Komma.  
  
Du möchtest '`#r .rapper input:focus, #searchform input:focus`{:.language-css}' selektieren.  
  
Und bitte kein [TOFU](http://de.wikipedia.org/wiki/TOFU)!  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[Juupie]

Hallo Gunnar,

ah, das war der Fehler:

Du möchtest '#r .rapper input:focus, #searchform input:focus' selektieren.

Es gibt wahrscheinlich keine Möglichkeit das das Input Feld nach dem Ändern auf schwarz zu belassen oder?

[Gunnar Bittersmann]

@@Juupie:

nuqneH

Es gibt wahrscheinlich keine Möglichkeit das das Input Feld nach dem Ändern auf schwarz zu belassen oder?

Zu welchem Zweck? Du suchst die Pseudoklassen :valid und :invalid? (Dazu müsste bspw. per @pattern angegeben sein, welche Eingaben gültig sind.)

Qapla'

[Der Martin]

Hallo,

danke für die Anregung, ich habe folgendes probiert:

<div class="rapper">

<input name="suche" type="text" value="Suche" maxlength="3" onclick="this.select();" autocomplete="off" >
</div>

>   
> ~~~css

#r .rapper input, #searchform input{font:14px/25px Helvetica, Arial, sans-serif; height:28px; border:1px solid #cdcdcd; background: #fff url(images/input-field-bg.gif) top left repeat-x; color:#A2A2A2; padding:0 0 0 8px; width:87px !important;}  

> #r .rapper input, #searchform input:focus{ color:#000000; }

die erste Regel trifft also zu für
 * alle input-Elemente, die Nachfahren eines Elements der Klasse "rapper" sind, das seinerseits
   wieder in einem Element mit der ID "r" steckt
 * alle input-Elemente, die Nachfahren eines Elements mit der id "searchform" sind
Die zweite Regel trifft zu für
 * alle input-Elemente, die Nachfahren eines Elements der Klasse "rapper" sind, das seinerseits
   wieder in einem Element mit der ID "r" steckt (identisch zur obigen Regel!)
 * alle input-Elemente, die Nachfahren eines Elements mit der id "searchform" sind, sobald sie den
   Focus haben

Abgesehen davon, dass die Selektoren nicht zu deinem HTML-Schnipsel passen (da gibt's kein Element mit den IDs "r" oder "searchform"),  sehe ich keine Stelle, wo du die Textfarbe auf einen anderen Wert als Schwarz (#000000) setzt. Warum wunderst du dich also, wenn die Schrift des Elements immer schwarz ist?

Ach übrigens: Der Klassenname "rapper" hat mich doch nachdenklich gemacht. Meintest du vielleicht "wrapper" (engl. "wrap": einwickeln, verpacken)?

Hi,
[...]
Ciao,
Martin

Und das nächste Mal bitte kein TOFU. Danke.

So long,
 Martin

[Juupie]

Hallo Martin,

keine Stelle, wo du die Textfarbe auf einen anderen Wert als Schwarz (#000000) setzt.

Doch color:#A2A2A2; in der ersten INPUT definition

[Der Martin]

Hi,

keine Stelle, wo du die Textfarbe auf einen anderen Wert als Schwarz (#000000) setzt.
Doch color:#A2A2A2; in der ersten INPUT definition

ja, sorry, jetzt sehe ich's auch.
Ich bin die unformatierte, unübersichtliche Textwurst zweimal durchgegangen und es ist mir nicht aufgefallen. Merkst du jetzt, dass lesbar formatierter Quellcode kein Luxus ist?

Warum's trotzdem nicht ging, hat Gunnar ja schon erklärt.

Ciao,
 Martin