:active CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die :active CSS Pseudoklasse repräsentiert ein Element (wie ein Button), das vom Benutzer aktiviert wird. Bei der Verwendung einer Maus beginnt die "Aktivierung" typischerweise, wenn der Benutzer die primäre Maustaste drückt.
Probieren Sie es aus
.joinBtn {
width: 10em;
height: 5ex;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
border: none;
border-radius: 5px;
font-weight: bold;
color: white;
cursor: pointer;
}
.joinBtn:active {
box-shadow: 2px 2px 5px #fc894d;
}
<p>Would you like to subscribe to our channel?</p>
<button class="joinBtn">Subscribe</button>
Die :active-Pseudoklasse wird häufig bei <a>- und <button>-Elementen verwendet. Andere häufige Ziele dieser Pseudoklasse sind Elemente, die in einem aktivierten Element enthalten sind und Formularelemente, die durch ihr zugeordnetes <label> aktiviert werden.
Stile, die durch die :active-Pseudoklasse definiert sind, werden von jeder nachfolgenden link-bezogenen Pseudoklasse (:link, :hover oder :visited), die mindestens die gleiche Spezifität hat, überschrieben. Um Links entsprechend zu stylen, platzieren Sie die :active-Regel nach allen anderen link-bezogenen Regeln, wie durch die LVHA-Reihenfolge definiert: :link — :visited — :hover — :active.
Hinweis:
Auf Systemen mit Mäusen mit mehreren Tasten gibt CSS vor, dass die :active-Pseudoklasse nur für die primäre Taste gelten muss; bei rechtshändigen Mäusen ist dies typischerweise die linke Taste.
Syntax
:active {
/* ... */
}
Beispiele
Aktive Links
HTML
<p>
This paragraph contains a link:
<a href="#">This link will turn red while you click on it.</a>
The paragraph will get a gray background while you click on it or the link.
</p>
CSS
/* Unvisited links */
a:link {
color: blue;
}
/* Visited links */
a:visited {
color: purple;
}
/* Hovered links */
a:hover {
background: yellow;
}
/* Active links */
a:active {
color: red;
}
/* Active paragraphs */
p:active {
background: #eeeeee;
}
Ergebnis
Aktive Formularelemente
HTML
<form>
<label for="my-button">My button: </label>
<button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
CSS
form :active {
color: red;
}
form button {
background: white;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-active |
| Selectors Level 4 # active-pseudo |