Beispiel:CSS grundlagen focus-within.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>focus-within</title>
<style>
  form {
    max-width: 30em;
  }
  fieldset {
    padding: 0 1em 1em;
    margin: .5em;
    border-width: 2px;
    border-style: solid;
    border-radius: .3em;
  }
  legend {
    padding: 0 .5em;
    color: gray;
    border-bottom: 2px solid transparent;
  }
  form * {
    display: block;
  }
  label {
    margin-top: .5em;
  }
  label:focus-within {
    color: rgba(102,175,233,1);
  }
  input {
    padding: .3em .5em;
    border-radius: .3em;
  }
  fieldset:focus-within {
    border-color: #dfac20;
    background: #fffbf0;
  }
  fieldset:focus-within legend {
    color: black;
    background: white;
    border-bottom-color: #dfac20;
  }
  input:focus {
    border: 2px solid #66afe9;
    box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(102,175,233,0.6);
  }
</style>
</head>

<body>
<h1>focus-within</h1>

  <form>
    <fieldset>
      <legend>persönliche Daten</legend>
      <label for="name">Name:
        <input id="name">
      </label>
      <label  for="firstname">Vorname:
        <input id="firstname">
      </label>
    </fieldset>
    <fieldset>
      <legend>Zugangsdaten</legend>
      <label for="email">Benutzername (Email-Adresse):
        <input id="email" type="email" placeholder="test@example.com">
      </label>
      <label for="password">Passwort:
        <input id="password" type="password">
      </label>
    </fieldset>
  </form>
  
<p>Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Pseudoklasse#Maus-_und_Tastaturinteraktionen">CSS/Tutorials/Selektoren</a> (<code>focus-within</code>).</p>

<a href="https://forum.selfhtml.org/advent/2024"><div style="display:grid;grid-template-columns: 63px 1fr; gap:0.5em;"><img src="https://wiki.selfhtml.org/images/a/ad/Selfhtml-nico.png" alt="SELFHTML-Logo mit Adventsmütze" width="63px"><p>Zurück zum <br><b>Adventskalender 2024</b>.</p></div></a>  
</main>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS_grundlagen_focus-within.html&oldid=100189“