search

博客列表 >CSS:表单伪类-复习

CSS:表单伪类-复习

异乡客
异乡客原创
2022年05月10日 10:30:27744浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表单伪类</title>
  8. </head>
  9. <body>
  10. <!-- 
  11. 伪类：
  12. 1.结构伪类：根据元素位置获取元素
  13. 2.状态伪类：根据状态来获取元素 -->
  15.     <ul class="list">
  16.         <li class="first">item1</li>
  17.         <li>item2</li>
  18.         <li>item3</li>
  19.         <li>item4</li>
  20.         <li>item5</li>
  21.         <li>item6</li>
  22.         <li>item7</li>
  23.         <li>item8</li>
  24.     </ul>
  26.     <input type="text">
  27.     <input type="text" disabled>
  28.     <input type="radio" name="sex" id="m" value="0"><label for="m">男</label>
  29.     <input type="radio" name="sex" id="f" value="0"><label for="f">女</label>
  30.     <p>
  31.         <button>提交</button>
  32.     </p>
  34.     <style>
  36.      input:disabled{
  37.         background-color: yellow;
  38.      }
  40.      input:enabled{
  41.          background-color: cyan;
  42.      }
  44.      input:checked + label {
  45.          color:red;
  46.      }
  48.      button {
  49.          width:100px;
  50.          height:30px;
  51.          border: none;
  52.          outline: none;
  53.          background-color: seagreen;
  54.          color:white;
  55.      }
  57.      button:hover{
  58.          background-color: coral;
  59.          cursor: pointer;
  60.      }
  62.      input:focus{
  63.          background-color: red;
  64.      }
  66.     </style>
  69. </body>
  70. </html>
上一条：CSS基础知识：实现了太极图文详解下一条：ModStartCMS 模块化建站系统 v3.9.0
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多