Pseudo-razred :read-write

Pseudo-razred :read-write se uporablja za oblikovanje elementov, ki jih je mogoče urejati. To so vsi vnosni elementi brez atributa readonly.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
<style>
    input, textarea {
        padding: 8px;
        margin: 5px;
        border-radius: 4px;
        border: 2px solid #9e9e9e;
    }
    
    input:read-write, textarea:read-write {
        border-color: #2196F3;
        background-color: white;
    }
    
    input:read-write:hover, textarea:read-write:hover {
        border-color: #1976D2;
        background-color: #f8f8f8;
    }
    
    input:read-write:focus, textarea:read-write:focus {
        border-color: #1976D2;
        outline: none;
        box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
    }
    
    input:read-write + label::after {
        content: " (lahko urejate)";
        color: #2196F3!important;
        font-size: 0.9em;
    }
</style>
</head>
<body>
    <h3>Obrazec z urejevalnimi in ne urejevalnimi polji</h3>
    <form>
        <div>
            <input type="text" id="ime" placeholder="Vnesite ime">
            <label for="ime">Ime</label>
        </div>
    
        <div>
            <input type="text" id="id" value="ID-12345" readonly>
            <label for="id">ID številka (zaklenjeno)</label>
        </div>
    
        <div>
            <textarea id="opombe" placeholder="Vnesite opombe"></textarea>
            <label for="opombe">Opombe</label>
        </div>
    
        <div>
            <textarea id="sistemsko" readonly>Sistemsko sporočilo</textarea>
            <label for="sistemsko">Sistemske informacije</label>
        </div>
    </form>
</body>
</html>

REZULTAT