Cara Menggunakan Pseudo-class optional pada CSS

: optional adalah selektor Pseudo-class CSS yang digunakan untuk memilih elemen form yang bersifat opsional.

Lebih khusus lagi, ini digunakan untuk memilih elemen formulir yang tidak diperlukan; yaitu, elemen formulir yang tidak memiliki set atribut yang diperlukan.

Elemen formulir yang dapat dipilih menggunakan: optional adalah <input> s, <select> s, dan <textarea> s tanpa atribut yang diperlukan.

Misalnya, elemen formulir berikut dapat dipilih menggunakan: optional:

<input type="text">

<input type="submit">

<!-- and other input types as well.. -->

<textarea name="name" id="id" cols="30" rows="10"></textarea>

<select name="nm" id="sel">
    <!-- options -->
</select>

Elemen formulir berikut ini tidak dapat dipilih menggunakan: optional:

<input type="name" required>

<input type="email" required>

<!-- and other input types as well.. -->

<textarea name="name" id="message" cols="30" rows="10" required></textarea>

<select name="nm" id="sel" required>
    <!-- options -->
</select>

: optional berguna untuk menata elemen bentuk opsional dengan cara yang akan mengurangi fokus visual pada elemen tersebut dan lebih fokus pada bidang yang diperlukan.

Contoh:

Berikut ini akan memberikan gaya yang sedikit pudar pada input yang meminta pengguna untuk URL situs web. Ini biasanya merupakan bidang opsional dalam formulir komentar, misalnya.

input[type="url"]:optional {
    background-color: #f5f5f5;
    border: 1px solid #eee;
}