Pseudo-class :read-write

The :read-write pseudo-class is used to style elements that can be edited. These are all input elements without the readonly attribute.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<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>Form with editable and non-editable fields</h3>
    <form>
        <div>
            <input type="text" id="name" placeholder="Enter name">
            <label for="name">Name</label>
        </div>
    
        <div>
            <input type="text" id="id" value="ID-12345" readonly>
            <label for="id">ID number (locked)</label>
        </div>
    
        <div>
            <textarea id="notes" placeholder="Enter notes"></textarea>
            <label for="notes">Notes</label>
        </div>
    
        <div>
            <textarea id="system" readonly>System message</textarea>
            <label for="system">System information</label>
        </div>
    </form>
</body>
</html>

RESULT