您的位置：首页 > Web前端 > CSS

CSS-表单伪类选择器

2017-10-26 14:21 585 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航