CSS-表单伪类选择器

来源：互联网发布：淘宝虚假宣传如何处罚编辑：程序博客网时间：2024/05/21 11:00

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>表单伪类选择器</title>
   <style>
       form *:focus{
           /*background-color: pink;*/
       }
       form *:valid{
           /*background-color: green;*/
       }
       form *:invalid{
           /*background-color: red;*/
       }
       form *:required{
           background-color: blue;
       }
       form *:optional{
           background-color: yellow;
       }
       form *:default{
           outline: 1px solid red;
       }
       form *:checked{
           outline: 1px solid blue;
       }
   </style>
</head>
<body>
   <form action="">
       <input type="text">
       <input type="text" required>
       <br>
       <input type="tel" required pattern="\d{4}">
       <input type="radio" checked name="gender">
       <input type="radio" name="gender">
       <input type="radio" name="gender">
       <input type="radio" name="gender">
   </form>
</body>
</html>

阅读全文

0 0