让 checkbox 可点击区域变大需隐藏原生控件（position: absolute; opacity: 0），用 label 绑定并配合 ::before/::after 伪元素绘制自定义方框，同时保留可访问性。
怎么让 <input type="checkbox"> 真正可点击的区域变大
浏览器默认的复选框太小，用户点不准，但直接设 width/height 会失效——因为原生控件样式受限。真正有效的做法是隐藏原生控件，用 <label> 绑定 + 伪元素模拟。
- 必须给
<input>加position: absolute; opacity: 0;（不能用display: none，否则会丢失可访问性） -
<label>需带for属性或包裹<input>，确保点击 label 也能触发选中 - 用
::before或::after在 label 上画自定义方框，再通过input:checked + label::before切换状态样式 - 别忘了加
cursor: pointer，否则视觉上不像可点元素
appearance: none 在不同浏览器里到底能不能用
这个 CSS 属性本意是“清空原生样式”，但它在表单控件上的支持极不统一：Chrome 和 Safari 对 <select>、<button> 支持较好；Firefox 对 <input type="range"> 的 appearance 响应很弱；IE 完全不认。
- 单独写
appearance: none;不够，得加前缀：-webkit-appearance: none;、-moz-appearance: none; - 清掉
appearance后，<select>的下拉箭头不会自动消失，还得用background覆盖或select::-ms-expand（仅 IE/Edge）隐藏 - 用了
appearance: none的<input type="number">，在 Safari 里仍可能保留上下微调按钮，需额外设::-webkit-inner-spin-button { appearance: none; }
为什么自定义 <textarea> 拉伸手柄失效了
常见操作是设 resize: both; 或 resize: vertical;，但一加自定义边框/内边距/字体，手柄就缩成一个小点甚至消失——根本原因是手柄位置固定在右下角，而你的 padding 或 border 把它挤出了可视区。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 确保父容器没有
overflow: hidden，否则手柄被裁剪 - 不要给
<textarea>设max-width: 100%;且同时设resize: horizontal;，宽度撑不满时手柄无处安放 - 若用 Flex/Grid 布局包裹
<textarea>，需检查是否父容器设了min-width: 0;或min-height: 0;，否则拉伸会被约束 - 移动端 Safari 默认禁用
resize，必须显式写resize: vertical;才生效
<input type="file"> 的按钮怎么换文字还不破坏功能
直接改 value 属性无效，JS 也不能随意赋值（安全限制），唯一可靠路径是隐藏原生控件 + 用其他元素冒充按钮 + 触发 click 事件。
立即学习“前端免费学习笔记（深入）”；
- 原生
<input type="file">必须保留在 DOM 中，且不可设display: none（部分屏幕阅读器会跳过），推荐用position: absolute; left: -9999px; - 绑定点击事件到自定义按钮时，调用
inputElement.click()，不是inputElement.dispatchEvent(new MouseEvent('click'))（后者在某些 Safari 版本不触发选择框） - 监听
change事件取文件名时，注意event.target.files[0]?.name可能为undefined（用户取消选择），别直接链式调用 - 如果页面有多个 file input，别用
document.querySelector('input[type="file"]')模糊匹配，容易误触
