掌握利用属性选择器针对不同类型的输入框（input[type="text"] 等）进行精准样式控制
学会使用 padding、margin、border 和 border-radius 优化表单的布局与视觉质感
理解 :focus 伪类的作用，能够自定义输入框获取焦点时的状态反馈
掌握背景图像技术与 transition 过渡动画，实现搜索框图标集成及动态宽度展开效果
能够遵循无障碍设计原则，创建既美观又易用的现代化表单界面
表单是网页与用户交互的核心桥梁，用于收集注册信息、搜索查询、反馈建议等数据。默认的 HTML 表单样式通常简陋且缺乏品牌一致性。通过 CSS，我们可以彻底重塑表单的外观，使其在视觉上更具吸引力，在操作上更加流畅。
CSS 提供了丰富的属性来控制表单元素，包括：
尺寸控制: width, height
空间布局: padding, margin
边框修饰: border, border-radius
色彩体系: color, background-color
交互状态: :focus, :hover, :disabled
动画效果: transition
HTML <input> 标签通过 type 属性定义其功能（如 text, password, email, radio 等）。CSS 属性选择器允许我们针对特定类型的输入框应用样式，而不会影响其他类型。
语法示例：
/* 仅选中 type 为 text 的输入框 */
input[type="text"] {
/* 样式规则 */
}
/* 选中所有 input 元素 */
input {
/* 通用样式 */
}代码示例：区分单选框与文本框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 属性选择器</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
/* 通用输入框样式 */
input {
margin: 5px;
}
/* 仅针对文本输入框设置背景色 */
input[type="text"] {
background-color: #e3f2fd;
border: 1px solid #90caf9;
padding: 5px;
}
/* 针对单选按钮不做背景色修改，保持默认 */
input[type="radio"] {
transform: scale(1.2); /* 稍微放大单选框 */
}
</style>
</head>
<body>
<form>
<p><strong>您觉得本教程有帮助吗？</strong></p>
<!-- 单选按钮 -->
<label>
<input type="radio" name="useful" value="yes" checked> 是的
</label>
<label>
<input type="radio" name="useful" value="def_yes"> 非常有帮助
</label>
<p><strong>请留下您的建议：</strong></p>
<!-- 文本输入框 -->
<input type="text" name="suggestion" placeholder="在此输入...">
</form>
</body>
</html>
合理的空间布局是表单易用性的关键。
width: 控制输入框的宽度，可使用百分比（%）或固定像素（px）。
padding: 增加输入框内部空间，使文字不紧贴边框，提升点击体验和可读性。
margin: 控制输入框外部间距，避免多个表单项拥挤在一起。
代码示例：优化间距与内边距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单空间布局</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #fff;
padding: 20px;
}
.styled-input {
width: 40%; /* 占据屏幕宽度的 40% */
padding: 12px 15px; /* 上下 12px, 左右 15px 的内边距 */
margin: 10px 0; /* 上下外边距 10px，左右为 0 */
box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
font-size: 16px;
}
</style>
</head>
<body>
<form>
<label><strong>请输入您喜欢的两个技术主题：</strong></label><br>
<input type="text" class="styled-input" name="topic1" placeholder="主题一"><br>
<input type="text" class="styled-input" name="topic2" placeholder="主题二">
</form>
</body>
</html>
边框定义了输入框的轮廓，而圆角则能赋予界面现代、柔和的视觉感受。
border: 可分别设置 border-top, border-bottom 等，实现个性化边框效果。
border-radius: 值越大，圆角越明显。50% 可将方形变为圆形（常用于头像或按钮）。
代码示例：自定义边框风格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>边框与圆角</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
/* 标准圆角边框 */
.input-rounded {
width: 40%;
padding: 10px;
margin: 10px 0;
border: 2px solid #ff5252; /* 红色实线边框 */
border-radius: 8px; /* 8 像素圆角 */
}
/* 仅保留上下边框 */
.input-minimal {
width: 40%;
padding: 10px;
margin: 10px 0;
border: none; /* 移除所有边框 */
border-top: 3px solid #2196f3; /* 仅顶部蓝色边框 */
border-bottom: 3px solid #ff5252;/* 仅底部红色边框 */
background-color: #f9f9f9;
}
</style>
</head>
<body>
<form>
<h4>风格 A：圆角彩色边框</h4>
<input type="text" class="input-rounded" placeholder="输入内容...">
<h4>风格 B：极简上下边框</h4>
<input type="text" class="input-minimal" placeholder="输入内容...">
</form>
</body>
</html>
通过调整文字颜色 (color) 和背景颜色 (background-color)，可以匹配网站的整体主题，或在深色模式下提供舒适的阅读体验。
代码示例：深色主题输入框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>色彩定制</title>
<style>
body {
background-color: #ffffff;
font-family: Arial, sans-serif;
padding: 20px;
}
.dark-input {
width: 40%;
padding: 12px;
margin: 10px 0;
border: none;
background-color: #2e7d32; /* 深绿色背景 */
color: #ffffff; /* 白色文字 */
font-weight: bold;
}
.dark-input::placeholder {
color: #a5d6a7; /* 占位符文字颜色 */
}
</style>
</head>
<body>
<form>
<label><strong>输入您喜欢的主题（深色模式）：</strong></label><br>
<input type="text" class="dark-input" placeholder="在此输入...">
</form>
</body>
</html>
当用户点击输入框时，浏览器默认会添加一个蓝色轮廓（outline）。使用 :focus 伪类可以完全自定义这一状态，提供清晰的视觉反馈，告知用户当前正在哪个字段输入。
代码示例：自定义焦点效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义焦点状态</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input {
width: 40%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
outline: none; /* 移除默认蓝色轮廓 */
transition: all 0.3s ease;
}
/* 当输入框获得焦点时 */
input[type="text"]:focus {
border: 2px solid #ff5252; /* 红色边框 */
background-color: #ffebee; /* 浅红背景 */
box-shadow: 0 0 8px rgba(255, 82, 82, 0.4); /* 发光效果 */
}
</style>
</head>
<body>
<form>
<label><strong>点击输入框查看效果：</strong></label><br>
<input type="text" placeholder="點我試試...">
</form>
</body>
</html>
在搜索框中，我们常看到放大镜图标。这可以通过 background-image 实现。关键在于调整 padding 以预留图标空间，并使用 background-position 精确定位。
代码示例：带图标的搜索框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景图像搜索框</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.search-box {
width: 40%;
padding: 12px 20px 12px 45px; /* 左侧 padding 留出图标位置 */
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 25px;
/* 背景图像设置 */
background-image: url('https://placehold.co/20x20/png?text=🔍'); /* 使用占位图模拟图标 */
background-position: 15px center; /* 水平 15px, 垂直居中 */
background-repeat: no-repeat; /* 不重复 */
background-size: 20px; /* 控制图标大小 */
}
</style>
</head>
<body>
<form>
<label><strong>站内搜索：</strong></label><br>
<input type="text" class="search-box" placeholder="搜索关键词...">
</form>
</body>
</html>
transition 属性可以让样式变化（如宽度、颜色）在一段时间内平滑完成，而不是瞬间跳变。这在创建“点击展开”的搜索框时非常有用。
代码示例：动态宽度展开效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过渡动画效果</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
.animated-input {
width: 15%; /* 初始宽度 */
padding: 10px;
border: 2px solid #2196f3;
border-radius: 5px;
outline: none;
/* 定义过渡效果：宽度变化耗时 1 秒，缓动函数 ease-in-out */
transition: width 1s ease-in-out;
}
/* 焦点状态下宽度变为 30% */
.animated-input:focus {
width: 30%;
background-color: #e3f2fd;
}
</style>
</head>
<body>
<form>
<label><strong>点击输入框观察宽度变化：</strong></label><br>
<input type="text" class="animated-input" placeholder="搜索...">
</form>
</body>
</html>保持一致性: 全站表单的输入框高度、字体大小和边框风格应保持一致，降低用户认知负荷。
注重无障碍性: 始终保留清晰的 :focus 状态，不要随意移除 outline 而不提供替代方案，以便键盘导航用户能知道当前位置。
移动端适配: 在移动设备上，确保输入框高度至少为 44px，方便手指点击。使用 viewport 元标签防止 iOS 缩放。
语义化标签: 始终使用 <label> 标签关联输入框，这不仅对屏幕阅读器友好，也能让用户点击文字时激活输入框。
在使用 background-image 添加搜索图标时，为什么需要特别调整 padding-left 的值？如果不调整，会发生什么视觉问题？
transition: width 1s ease-in-out 这段代码中，ease-in-out 的作用是什么？如果改为 linear，动画效果会有何不同？
为了提升无障碍访问性（Accessibility），我们在自定义 :focus 样式时，为什么不能简单地使用 outline: none 而不添加其他视觉提示？请简述原因并提供一种替代方案。