Pseudo-razred :focus

Pseudo-razred :focus omogoča oblikovanje elementa, ki ima trenutno fokus. To je posebej uporabno pri obrazcih in interaktivnih elementih, kjer želimo uporabniku vizualno pokazati, kateri element je trenutno aktiven.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>CSS :focus Primer</title>
    
    <style>
        .container {
            max-width: 100%;
            margin: 20px auto;
            padding: 20px;
        }

        /* Osnovno oblikovanje vnosnih polj */
        input, textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid #ddd;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        /* Focus efekt na vnosnih poljih */
        input:focus, textarea:focus {
            border-color: #2196F3;
            box-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
            outline: none;
        }

        /* Posebni focus efekt za gumb */
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:focus {
            outline: 3px solid #45a049;
            outline-offset: 2px;
        }
        
        #rezultat {
            white-space: pre-wrap; /* vsi izpisi so v novi vrstici */
        }
    </style>
</head>
<body>
    <div class="container">
        <form id="frm">
            <input id="ime" type="text" placeholder="Vnesite ime">
            <input id="email" type="email" placeholder="Vnesite email">
            <textarea id="sporocilo" placeholder="Vaše sporočilo"></textarea>
            <button type="submit">Pošlji</button>
        </form>
    </div>
    
    <div id="rezultat" aria-live="polite"></div>
    
    <script src="examples/css/focus_slo.js" defer></script>
</body>
</html>

REZULTAT

V vadnici o psevdorazredu :focus smo uporabili tudi malo JavaScript kode, da ob oddaji obrazca prikažemo, kaj je uporabnik vpisal v polja. Če katero polje pustimo prazno, se v povzetku prikaže znak “-”. Kaj naredi skripta:

Počaka, da se DOM naloži (DOMContentLoaded).
Najde obrazec (id="frm") in prestreže oddajo (submit) z e.preventDefault(), da se stran ne osveži.
Prebere vrednosti polj ime, email in sporočilo, jih obreže (trim) in pripravi večvrstični povzetek.
Za prazna polja v izpisu uporabi “-”.
Povzetek zapiše v element z id="rezultat" kot navadno besedilo (textContent). Za pravilne prelome vrstic uporabi na #rezultat lastnost white-space: pre-wrap.


document.addEventListener('DOMContentLoaded', () => {
    const frm = document.getElementById('frm');
    if (!frm) return;

    frm.addEventListener('submit', (e) => {
        e.preventDefault();
        const ime = document.getElementById('ime')?.value.trim() || '';
        const email = document.getElementById('email')?.value.trim() || '';
        const sporocilo = document.getElementById('sporocilo')?.value.trim() || '';
        const izpis =
            'Vpisano:\n\n' +
            'Ime: ' + (ime || '-') + '\n' +
            'Email: ' + (email || '-') + '\n' +
            'Sporočilo: ' + (sporocilo || '-');
        const rez = document.getElementById('rezultat');
        if (rez) rez.textContent = izpis;
    });
});

Več o JavaScript lahko izveš v moji JavaScript vadnici.