kostenloser Webspace werbefrei: lima-city

focus

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   the-8-beta

   the-8-beta hat kostenlosen Webspace.

   21:11, 20.11.2010

   Hallo an Alle
   
   ich hab ein text input mit der id #searchInput
   und dann hab ich dann hab ich noch einen image input als Button mit der Id #searchSubmit
   

   #searchInput {
    background-color:#ffffff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    opacity: 0.4;
   }
   #searchSubmit {
     opacity: 0.4;
    }
   #searchInput:focus {
    background-color:#ffffff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    opacity: 1;
   }

   
   ^das funktioniert
   aber ich will das wenn man drauf klickt nicht nur das Textfeld nicht mehr Transparent ist sondern auch der Button.
   wie macht man das? oder geht das überhaupt nicht?
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. nikic

   

   nikic hat kostenlosen Webspace.

   21:18, 20.11.2010

   Wenn das #searchSubmit direkt hinter dem #searchInput ist, nutze #searchInput:focus, #searchInput:focus + #searchSubmit. Wenn es noch Elemente dazwischen geben kann, dann #searchInput:focus, #searchInput:focus ~ #searchSubmit.
   
   Beide Varianten gehen nur, wenn #searchInput und #searchSubmit das gleiche Elternelement besitzen.
4. Autor dieses Themas

   the-8-beta

   the-8-beta hat kostenlosen Webspace.

   13:54, 21.11.2010

   danke für deine schnelle Antwort.
   Ich habs jetzt so:
   

   #searchInput {
    background-color:#ffffff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    opacity: 0.4;
   }
   #searchInput:focus ~ #searchSubmit {
    opacity: 1;
   }
   #searchInput:focus {
    opacity: 1;
   }
    #searchSubmit {
     opacity: 0.4;
    }

   
   da bei dem #searchInput:focus ~ #searchSubmit { nur der Button sichtbar wird

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?