Pseudo-class :optional

The :optional pseudo-class is used to style optional fields in forms. These are all input fields that don't have the required attribute. This selector is particularly useful when designing forms where we want to visually distinguish between required and optional fields.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    input:optional {
        border: 2px solid #4CAF50!important;
        padding: 8px;
        margin: 5px;
        border-radius: 4px;
    }
    
    input:optional + label::after {
        content: " (neobvezno)";
        color: #666!important;
        -webkit-text-fill-color: #666!important;
        font-size: 0.9em;
        font-style: italic;
    }
    
    /* For comparison - required fields */
    input[type=text]:required, input[type=email]:required, input[type=tel]:required {
        background-color: #f44336!important;
        color: #263244!important;
        padding: 12px;
        margin: 4px;
        font-size: 24px;
        -webkit-text-fill-color: #263244!important;
    }
    
    input:required + label::after {
        content: " *";
        color: #f44336!important;
        -webkit-text-fill-color: #f44336!important;
    }
</style>
</head>
<body>
    <h3>Form with required and optional fields</h3>
    <form>
        <div>
            <input type="text" id="name" required>
            <label for="name">Name</label>
        </div>
        
        <div>
            <input type="text" id="nickname">
            <label for="nickname">Nickname</label>
        </div>
        
        <div>
            <input type="email" id="email" required>
            <label for="email">Email</label>
        </div>
        
        <div>
            <input type="tel" id="phone">
            <label for="phone">Phone number</label>
        </div>
    </form>
</body>
</html>

RESULT