init

2025-11-20 11:03:10 +08:00
commit 0a5cc64d0e
14 changed files with 884 additions and 0 deletions
--- a/css3/04-complex-form-styles/RADEME.md
+++ b/css3/04-complex-form-styles/RADEME.md
@@ -0,0 +1,11 @@
+# Complex Form Styles
+
+高级选择器挑战：复杂表单样式
+
+题目要求：
+1. 样式化一个复杂表单，要求：
+2. 使用属性选择器和伪类
+3. 实现表单验证样式
+4. 添加自定义复选框和单选框
+5. 实现焦点和悬停状态
+6. 使用CSS变量主题化
--- a/css3/04-complex-form-styles/index.html
+++ b/css3/04-complex-form-styles/index.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>高级CSS挑战 - 复杂表单</title>
+        <style>
+            :root {
+                --primary: #3498db;
+                --danger: #e74c3c;
+                --success: #2ecc71;
+                --border: #bdc3c7;
+            }
+
+            .form-group {
+                margin-bottom: 1rem;
+            }
+
+            input[type="text"],
+            input[type="email"],
+            select {
+                width: 100%;
+                padding: 0.75rem;
+                border: 2px solid var(--border);
+                border-radius: 6px;
+                transition: all 0.3s ease;
+            }
+
+            input:focus,
+            select:focus {
+                outline: none;
+                border-color: var(--primary);
+                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+            }
+
+            input:invalid {
+                border-color: var(--danger);
+            }
+
+            input:valid {
+                border-color: var(--success);
+            }
+
+            /* 自定义复选框 */
+            .checkbox {
+                position: relative;
+                padding-left: 2rem;
+            }
+
+            .checkbox input {
+                position: absolute;
+                opacity: 0;
+            }
+
+            .checkmark {
+                position: absolute;
+                left: 0;
+                height: 20px;
+                width: 20px;
+                background: white;
+                border: 2px solid var(--border);
+                border-radius: 4px;
+            }
+
+            .checkbox input:checked ~ .checkmark {
+                background: var(--primary);
+                border-color: var(--primary);
+            }
+
+            .checkmark::after {
+                content: "";
+                position: absolute;
+                display: none;
+                left: 6px;
+                top: 2px;
+                width: 5px;
+                height: 10px;
+                border: solid white;
+                border-width: 0 2px 2px 0;
+                transform: rotate(45deg);
+            }
+
+            .checkbox input:checked ~ .checkmark::after {
+                display: block;
+            }
+        </style>
+    </head>
+    <body>
+        <form>
+            <div class="form-group">
+                <input type="text" placeholder="姓名" required />
+            </div>
+            <div class="form-group">
+                <input type="email" placeholder="邮箱" required />
+            </div>
+            <div class="form-group">
+                <label class="checkbox">
+                    <input type="checkbox" required />
+                    <span class="checkmark"></span>
+                    同意条款
+                </label>
+            </div>
+        </form>
+    </body>
+</html>