CSS :optional-Pseudoklasse
Der :optional-Selektor wählt optionale Elemente aus.
Form-Elemente sind optional, wenn das required-Attribut nicht gesetzt ist. Formularelemente, die mit :optional ausgewählt werden können, sind <input>, <select> und <textarea>, die kein required-Attribut besitzen.
Der :optional-Selektor kann mit anderen Selektoren (z. B. :hover) und Pseudo-Elementen (z. B. ::after) kombiniert werden.
Version
CSS Basic User Interface Module
Syntax
CSS :optional-Syntax
css
:optional {
css declarations;
}Beispiel für den :optional-Selektor:
CSS :optional-Codebeispiel
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
select,
button {
padding: .4em 1em;
}
input,
select {
border: 1px solid #666666;
}
input:optional,
select:optional {
background-color: #eeeeee;
color: #666666;
opacity: 0.5;
transition: .3s;
}
input:optional:hover,
select:optional:hover {
opacity: 1;
}
input:required,
textarea:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:optional selector example</h2>
<div class="example">
<form action="#">
<label>
<input type="name" required />Name *
</label>
<label>
<input type="email" required />Email *
</label>
<label>
<input type="phone" />Phone (optional)
</label>
<label>
<input type="url" />Address (optional)
</label>
</form>
</div>
</body>
</html>In dem obigen Beispiel werden sowohl der :optional- als auch der :required-Pseudoklassen-Selektor verwendet.
Praxis
Welche Funktion haben CSS :optional-Selektoren?