✔ Link :active mit #id als Ziel

[cola1]

Hi,

versuche gerade ein Formular mit Radio-Buttons ohne Hilfe von JS zu stylen.
Anstatt den klickbaren Radio-Felder soll ein Div inkl. Border seinen Platz finden.

Bis jetzt werden die Radio-Felder per CSS ausgeblendet.

Im dazugehörigen Label-Element ist ein A-Element mit Höhe, Padding und Border, sodass man beim Hover einer Auswahl schonmal bemerkt, dass eine Auswahl möglich ist.

Jetzt möchte ich allerdings noch, dass bei Klick auf diese Auswahl (also auch den Link) der Border diese Farbei beibehält, sodass der User weiß was ausgewählt ist. Das funktioniert nur nicht...

Hover Klappt soweit, jedoch bleibt der Border danach nicht in dieser Farbe. Liegt das am Anker-Ziel? Das brauche ich momentan jedoch, da sonst die Seite verlassen wird (andererseits auch Praktisch um sofort zum Login-Button zu kommen ) und eine andere Lösung nur auf CSS basierend ist mir noch nicht vor die Augen gekommen

<fieldset>
    <div>
        <input id="UserNameX" type="radio" value="UserNameX" name="character">
        <label for="UserNameX">
            <a href="miauuu.de/#enter">
                UserNameX
                <br>
                Level 5
            </a>
        </label>
    </div>
</fieldset>
<input id="enter" type="submit" value="Welt betreten" name="submit">

#character_overview form input[type="radio"] {
    display: none;
}

#character_overview form fieldset a {
    padding: 10px;
    width: 180px;
    height: 130px;
    border: 1px solid #000000;
    float: left;
    margin: 10px;
}

#character_overview form fieldset a:hover,
#character_overview form fieldset a:focus,
#character_overview form fieldset a:active {
    border: 1px solid #f00;
}

 

[SpiceLab]

Jetzt möchte ich allerdings noch, dass bei Klick auf diese Auswahl (also auch den Link) der Border diese Farbei beibehält, sodass der User weiß was ausgewählt ist. Das funktioniert nur nicht...

Hover Klappt soweit, jedoch bleibt der Border danach nicht in dieser Farbe. Liegt das am Anker-Ziel?

:active greift nur bei gedrückter Maustaste. Wird diese vom Nutzer wieder losgelassen, verliert :active seine Gültigkeit.

Für dein Vorhaben wäre demnach JS vonnöten.