Selecting Required and Optional input Elements

Description

The :required selector matches input elements that have the required attribute.

The :optional selector selects input elements that do not have the required attribute.

Example

The following code shows how to select Required and Optional input Elements.


<!DOCTYPE HTML>
<html>
<head>
<style>
:required {<!--  www . java 2  s  .  c  o  m-->
  outline: medium solid green;
}

:optional {
  outline: medium solid red;
}
</style>
</head>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="price1"> $ per unit in your area:
         <input type="number" min="0" max="100" required value="1" id="price1" name="price1" />
      </label>
      <label for="price2"> $ per unit in your area:
         <input type="number" min="0" max="100" value="1" id="price2" name="price2" />
      <input type="submit" value="Submit" />
      </label>
    </p>
  </form>
</body>
</html>

Click to view the demo





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table