Hovereffekt für Formulare

[Klikla]

Hallo!
Ich würde gerne einen Hovereffekt bei einem Formular haben. Ich habe schon einmal gesehen, dass wenn man über ein Formularfeld geht, dieses die Hintergrundfarbe ändert. Ich weiß aber leider nicht mehr, welche Seite das war.
Wie geht das? Ist auch eine Art "active-Effekt" möglich? :-)

Vielen Dank für eure Hilfe!

Klikla

[Zeromancer]

Hallo Klikla,

Ich würde gerne einen Hovereffekt bei einem Formular haben. Ich habe schon einmal gesehen, dass wenn man über ein Formularfeld geht, dieses die Hintergrundfarbe ändert. Ich weiß aber leider nicht mehr, welche Seite das war.

du kannst mittels Pseudoformaten so ziemlich alles nach deinen Wünschen gestalten. Knackpunkt hierbei ist jedoch, dass ein _bestimmter_ Browser diese Art der Gestaltung nicht unterstützt.

Mit freundlichen Grüßen,
André

[Klikla]

Hallo!
Wie genau muss ich das dann machen? Ich habe es mal mit

input:hover{background-color:#D0D0D0}

versucht. Aber das funktioniert nicht.

Danke für deine Antwort!
Klikla

[Cheatah]

Hi,

Aber das funktioniert nicht.

wie hast Du getestet?

Cheatah

[Klikla]

Hallo!
Was genau meinst du mit wie? Wenn du die Browser meinst: FF und IE.

Hier habe ich das CSS-Script:

<style type="text/css">
body {
  color: #FFFFFF;
  background-color: #000000;
}
fieldset {
width: 540px;
margin: 0;
border: 0 none;
border-top: 3px double #999999;
border-bottom: 3px double #999999;
}
legend {
margin: 0px 0px 0px 30px;
padding: 3px 10px;
letter-spacing: 2pt;
border: 3px double #999999;
background-color: #FFFFFF;
color: #000;
}
.formbox {
width: 450px;
margin: 0 auto;
padding: 20px 0px 20px 0px;
text-align: left;
border-left: 3px double #999999;
}
div.eins,
div.eins-a,
div.eins-b {
float: left;
width: 120px;
margin: 10px 20px 0px 0px;
border-bottom: 3px double #999999;
}
div.eins-a {
padding-top: 20px;
}
div.eins-b {
border: 0 none;
}
div.zwei {
float: left;
width: 300px;
}
div.zwei input,
div.zwei textarea {
width: 300px;
margin-top: 5px;
border: 3px double #999999;
background-color: #FFFFFF;
color: #000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
}
div.zwei textarea {
overflow: auto;
}
label {
padding: 1px 0 0 10px;
background-color: transparent;
color: #FFFFFF;
}
div.zwei input.senden {
width: 305px;
margin-top: 8px;
padding: 2px 0;
font-size: 12px;
letter-spacing: 2pt;
background-color: #FFFFFF;
color: #000;
border: 1px solid;
border-color: #e4ded1 #7a6845 #7a6845 #e4ded1;
cursor: pointer;
}
* html div.zwei input.senden {
width: 307px;
}
.breaker {
clear: left;
}
input:hover{background-color:#D0D0D0};
</style>

und hier den HTML-Code:

<form action="" method="post">
 <fieldset>
  <legend>kontaktformular</legend>
   <div class="formbox">
    <div class="eins"><label for="vorname">vorname</label></div>
     <div class="zwei"><input class="inpt" type="text" size="40" name="vorname" id="vorname" value=""></div>
    <br class="breaker">
   </div>
  </fieldset>
</form>

Vielen Danke!
Klikla

[Axel Richter]

Hallo,

Was genau meinst du mit wie? Wenn du die Browser meinst: FF und IE.

IE scheidet aus, weil er INPUT:hover nicht umsetzt.

Im FireFox würde es funktionieren, wenn:

<style type="text/css">

input:hover{background-color:#D0D0D0};

^Du hier nicht einen Fehler gemacht hättest (Tipp: Die JavaScript-Konsole sollte jetzt eigentlich Fehler-Konsole heißen, weil sie solche Fehler auch anzeigt)...

div.zwei input,

^...und Du hier nicht in die Spezifitätsfalle stolpern würdest. Der Selector
div.zwei input
hat eine Spezifität von 012 (keine ID, eine Klasse, zwei Elemente).
Der Selector
input:hover
hat eine Spezifität von 011 (keine ID, eine Pseudoklasse, ein Element).
Ändere den Selector für input:hover in
div input:hover
oder
div.zwei input:hover

div.zwei textarea {
width: 300px;
margin-top: 5px;
border: 3px double #999999;
background-color: #FFFFFF;
color: #000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
}

</style>

Für den IE hatten wir dieses Problem vor kurzem erst.

viele Grüße

Axel

[Klikla]

Hallo!
Vielen Dank! Es funktioniert!
Klikla

[Cheatah]

Hi,

Ist auch eine Art "active-Effekt" möglich? :-)

neben dem, was Zeromancer sagte, vermute ich, dass Du _keinen_ zwischen-Klick-Beginn-und-Klick-Ende-Effekt haben möchtest.

Cheatah

[Klikla]

Hallo!

neben dem, was Zeromancer sagte, vermute ich, dass Du _keinen_ zwischen-Klick-Beginn-und-Klick-Ende-Effekt haben möchtest.

Oh! Natürlich nicht. Ich meine Focus-Effekt. Tschuldigung :)

Klikla