kostenloser Webspace werbefrei: lima-city


focus

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    the-8-beta

    the-8-beta hat kostenlosen Webspace.

    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. 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.

    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?

Über lima-city

Login zum Webhosting ohne Werbung!