11表单与列表样式

表单和列表是网页的两大「重样式」容器：一个负责收集用户输入（注册、搜索、下单）， 一个负责展示结构化信息（菜单、目录、表格）。浏览器给它们默认模样，CSS 给它们专业属性—— 这一节把表单控件的四件套（input / select / button / 列表与表格）一次收齐。

约 17 分钟 7 个动手实验 form / list / table

一、input 全家样式控制

所有输入控件 —— input[type=text]、type=email、type=password、textarea、type=search—— 都能共用同一套样式：padding、font、border、color、background。 它们共享浏览器给「替换元素」备下的同一套外观，需要的时候再单独挑出来。

焦点时的轮廓线，先回顾一下第 08 课《继承与层叠》的关键词 :focus 触发的轮廓： 这是无障碍设计的键盘生命线，别随手写 outline: none 又不给替代。 占位符 ::placeholder 单独走一个伪元素选择器，和 a 链接第 10 课的「重置态」是一致的思路。

input 装饰属性速查：每条都按「默认 → 改写」两栏拆开
属性 / 伪元素值示例作用
padding10px 14px撑大点击区，让输入不顶到边框
font / font-size14px / inherit继承页面字号，避免输入框字体突然变小
border1px solid #C9B995边框；厚薄、实虚线随意
background#FDF9F4输入区背景；可填图、可纯色
color#4E4A40输入文字色（占位符单独配色）
:focus + outline2px solid #B8552F焦点环：键盘用户的「我现在在哪」
::placeholdercolor: #B8552F; opacity: .6;占位符单独上色，比改整个 input 背景更准
::file-selector-buttonbackground: #96652C; color: #fff;文件上传按钮「浏览…」单独染色
appearancenone抹掉浏览器默认控件外观（按钮、下拉）
注册表单样式改造：把 .reg 的 focus 那块改成 outline: none、且不写替代样式 —— 键盘用户将彻底找不到光标在哪
输入控件一定要 font: inherit（或 font-size 单独再写一遍）—— 浏览器给 input 的默认 font-family 不是继承自 body，会让中文输入突然变难看。 还有，font 这条简写在大多数网页里也都写顺手了一遍。

二、checkbox / radio 自定义样式

浏览器给单复选框画了「勾选框 + 圈」一套，各家画风不统一。 三大流派按「改动幅度」从小到大：

  1. accent-color 一行染色 —— 最简单，保留原生控件，只换主题色（呼应第 05 课颜色与单位）
  2. 隐藏 input，用 label 包裹 —— 最稳定，借助 label 触发勾选，自定义 label 样式
  3. appearance: none + ::before 画 SVG/字符 —— 最灵活，能画任何形状，但 CSS 代码最多
三种流派对照：把 :root 的 accent-color 改成 #4E7A52，只有第一行变色——其他两行是定制标签，不吃 accent-color
流派二「隐藏 input」千万别用 display: none—— 那会让键盘 Tab 键彻底跳过这个控件，视障用户根本无法勾选。 用 opacity: 0 或 position: absolute; clip: rect(0 0 0 0) 保留可聚焦性。

三、select 改箭头 / datalist 改建议样式

<select> 默认的向下箭头在 Windows / macOS / Linux 三家浏览器画得五花八门， 「换皮统一」的标准写法：先 appearance: none 抹掉默认外观， 再用 background-image 内联一张 SVG 箭头（用 data URI 嵌进 CSS，零外部资源）。 内边距右半边要预留出箭头的位置，否则文字会被压到箭头下面。

<datalist> 的 <option> 弹出建议框样式 —— 各浏览器支持很有限（Firefox 基本不让你动）， 真要强定制建议换成熟的 combobox 组件库，本节只演示 appearance: none 这一条通用路径。

默认箭头 vs 自定义箭头：把 background-image 那行整段删掉 —— 右侧立刻回到浏览器原生气死人的小箭头
SVG 箭头用 data URI 内联进 CSS 有一个隐藏好处： 改色直接改 URL 里的 hex（%23B8552F）就行， 想换深一点改成 %238F3A26 —— 不用每张图都出一份。 注意 # 在 URL 里要写成 %23。

四、button 三态与禁用样式

按钮有三态：默认（normal）、悬停（hover）、按下（active）， 加上「被禁用」还有 :disabled。第四态是「聚焦」:focus，给键盘用户；第五态是「正在加载」，常配合 JS 切换 class。

关键的 可访问性细节：:disabled 状态除了改色，别忘了同时加 cursor: not-allowed 和 pointer-events: none（或 opacity）—— 鼠标变成「禁止」图标 + 不响应点击，视觉、行为、辅助技术三层都到位。

按钮三态 + 禁用：把第三个按钮的 disabled 属性去掉 —— 颜色瞬间恢复、cursor 也变回手型
动手：在上面按钮组里写一个 .btn-loading 类， 加上「正在加载…」文字与 cursor: progress;， 再加 animation: spin 1s linear infinite; 配 @keyframes spin 旋转一圈， 体验「按钮变忙」的视觉反馈。

五、list-style 三件套

列表（<ul>、<ol>）的项目符号由三个属性控制， 全部能合写到 list-style 一行里：

  • list-style-type —— 符号形状：disc（实心圆）、circle（空心圆）、square（方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-alpha（大写字母）、none（无）
  • list-style-position —— 符号在文本外（outside，默认）还是内（inside，缩进对齐）
  • list-style-image —— 自定义图片当符号：url(arrow.png)
list-style 三个属性与合写：先学单写再合写，最顺手
属性常用值作用
list-style-typedisc / circle / square / none / decimal / lower-roman / upper-alpha符号形状/编号体系
list-style-positionoutside（默认）/ inside符号挂在文字外/挤进文字里
list-style-imageurl(arrow.svg)用图代替符号
list-style（合写）decimal inside顺序：type → position → image
list-style: none—彻底去掉符号（自定义菜单/导航标配）
四种 list-style 对照：把 .ls-c 的 decimal 改成 lower-roman，数字立刻变 i / ii / iii
导航菜单的标配：list-style: none; padding-left: 0; 两条加在一起， 列表才会乖乖变成「横排无符号」的样子。光去符号还不行，浏览器默认会给 <ul> 留一段左侧缩进。

六、计数器 counter / counters

不写 list-style-type，你也能自己手动编出章节号——CSS 提供了「自增计数器」三件套：

  • counter-reset: 章节 0; —— 在某个祖先元素上「新建一个叫『章节』的计数器，初始为 0」
  • counter-increment: 章节; —— 在子元素上「每碰到一次，章节 + 1」
  • counter(章节); —— 在 ::before content 里「显示当前章节号」

多级编号（1.1、1.1.1、1.2.1）则用 counters()，它会从下往上把父级所有同名计数器拼成一段「父子编号」。

counter 三件套速查：resit / increment / 函数
名称语法作用
counter-resetcounter-reset: 章 0;新建 / 重置一个计数器，通常写在祖先元素
counter-incrementcounter-increment: 章;碰一次自增 1，写在要编号的子元素
counter()counter(章)单级取号，display 在 ::before 的 content 里
counters()counters(章, ".")多级嵌套编号，分隔符第二个参数指定
三级自动编号目录：把 counter-reset 那行的 3 改成 5，最外层编号立刻跨过 1~4 直接从 5 开始
counter-reset 可以是任意值，不只 0： 写 counter-reset: 章 3; 就从 4 开始编号 —— 用来给目录续章节、从中间续编都方便。

七、table 表格样式

表格默认双线（每个单元格各画一条边）丑得很。CSS 提供了整套表格属性， 加上「斑马纹」「标题位置」「空单元格显隐」这些贴心开关：

table 样式属性速查：从边框合并到斑马纹
属性常用值效果
border-collapsecollapse / separate合并边框（现代标配）/ 各自独立（默认）
border-spacing0 / 4px 8pxseparate 下两个方向间距；塌缩到 0 写法只对 collapse 有效
caption-sidetop / bottom表格标题（上/下）位置
empty-cellsshow / hide空白单元格是否显示边框
nth-child(odd/even)tr:nth-child(odd)斑马纹：奇偶行底色
text-alignleft / center / right列对齐：常用 th { text-align: left }
collapse vs separate + 斑马纹 + 空单元格：把 .t1 的 border-collapse 改回 separate，又变回双线丑样
border-collapse: collapse 下不能再写 border-spacing， 它俩互斥；border: 0 不要写在 td 上来「去掉表格线」—— 那只会让空单元格的边框消失，单元格里看不见，但你设置的其他边框属性也跟着乱了。 想要无线条就直接 border: 0 在 table 上。

八、本章小结

  • 输入控件通用样式：padding / font / border / background / color 五件套；:focus 焦点环不能用 outline: none 抹了就走；::placeholder 单独配色。
  • checkbox / radio 三流派：accent-color（一行染色） / 隐藏 input 包 label（稳定） / appearance: none + checked（最灵活）。
  • select 自定义箭头：appearance: none + background-image: url("data:image/svg+xml;…") 内联 SVG，右侧 padding 留出箭头位。
  • button 三态：默认 / :hover / :active；禁用 :disabled 必须加 cursor: not-allowed + 视觉降级。
  • list-style 三件套：type / position / image，合写 list-style: decimal inside;；导航菜单 list-style: none; padding-left: 0; 双清才彻底。
  • 计数器：counter-reset → counter-increment → counter() / counters()；counters() 用 "." 拼多级。
  • 表格：border-collapse: collapse 合线；caption-side 控制标题；tbody tr:nth-child(odd) 斑马纹。
动手练习：
  1. 用 list-style 装饰一篇笔记的项目符号（自定义图或 emoji 风格）。
  2. 用 counter() 给自己的笔记目录做自动编号（至少两层）。
  3. 用 table 样式美化一张数据表（合并线、斑马纹、标题样式配齐）。
  4. 用 appearance: none + 自定义箭头改 <select> 样式，让 select 和其他输入控件视觉统一。