CSS :optional

The :optional pseudo-class in CSS selects input elements that are not required. This allows you to style optional form fields differently from required ones, enhancing the user experience by providing visual cues about which fields are mandatory and which are optional.

Understanding :optional

The :optional pseudo-class matches form elements that do not have the required attribute. It is the opposite of the :required pseudo-class, which selects elements that have the required attribute.

Example Usage

Here is how you might use :optional in your CSS:

input:optional {
    background-color: #e0f7fa;
}

This CSS rule will apply a light blue background to all optional input fields.

Practical Example

Let's create a form with both required and optional fields to see how :optional works in action.

HTML Code

<form>
    <label>First Name (required):</label>
    <input type="text" name="firstName" required>
    <br><br>
    <label>Last Name (required):</label>
    <input type="text" name="lastName" required>
    <br><br>
    <label>Company (optional):</label>
    <input type="text" name="company">
    <br><br>
    <label>Email (required):</label>
    <input type="email" name="email" required>
    <br><br>
    <label>Phone Number (optional):</label>
    <input type="tel" name="phone">
    <br><br>
    <button type="submit">Submit</button>
</form>

CSS Code

input:required {
    border: 2px solid #f44336;
}

input:optional {
    border: 2px solid #4caf50;
}

In this CSS, required input fields have a red border, while optional fields have a green border.

Result

In the example above, you can see that the required fields have a red border, indicating that they must be filled out. The optional fields have a green border, indicating that they are not mandatory.

Styling Optional Fields with Placeholder Text

You can also style optional fields that display placeholder text to help guide users.

CSS Code

input:optional::placeholder {
    color: #9e9e9e;
    font-style: italic;
}

This CSS styles the placeholder text of optional fields to be gray and italic.

Example with Placeholder Styling

HTML Code

<form>
    <label>Email (required):</label>
    <input type="email" name="email" required>
    <br><br>
    <label>Website (optional):</label>
    <input type="url" name="website" placeholder="https://example.com">
    <br><br>
    <button type="submit">Submit</button>
</form>

CSS Code

input:required {
    border: 2px solid #f44336;
}

input:optional {
    border: 2px solid #4caf50;
}

input:optional::placeholder {
    color: #9e9e9e;
    font-style: italic;
}

Result

In this example, the placeholder text in the optional website field is styled to be gray and italic, making it clear that it's an optional input.

Using :optional with Other Form Elements

The :optional pseudo-class can also be used with other form elements such as <select> and <textarea>.

Example

textarea:optional {
    background-color: #fffde7;
}

This CSS rule will apply a light yellow background to any optional <textarea> elements.

Conclusion

The :optional pseudo-class is a useful tool in CSS for enhancing form usability. By visually distinguishing optional fields from required ones, you can guide users to complete forms more efficiently and reduce the likelihood of submission errors.