CSS :optional Pseudo Class

CSS :optional Pseudo Class

CSS :optional Pseudo Class


The :optional selector selects optional elements.

Form elements are optional when attribute is not required. Form elements that can be selected using :optional are <input>, <select> and <textarea> without a required attribute.

The :optional selector can be linked with other selectors (e.g. :hover) and with pseudo-elements (e.g. ::after).

Version 

CSS Basic User Interface Module

CSS2 Universal Selector

Syntax

:optional {
  css declarations;
}

Example of the: optional selector:

<!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 the given example both the :optional and the :required pseudo-class selectors are used.

Reactions

Post a Comment

0 Comments

close