让 checkbox 可点击区域变大需隐藏原生控件（position: absolute; opacity: 0），用 label 绑定并配合 ::before/::after 伪元素绘制自定义方框，同时保留可访问性。
怎么让 <input type="checkbox"> 真正可点击的区域变大
浏览器默认的复选框太小，用户点不准，但直接设 width/height 会失效——因为原生控件样式受限。真正有效的做法是隐藏原生控件，用 <label></label> 绑定 + 伪元素模拟。
- 必须给
<input>加position: absolute; opacity: 0;（不能用display: none，否则会丢失可访问性） -
<label></label>需带for属性或包裹<input>，确保点击 label 也能触发选中 - 用
::before或::after在 label 上画自定义方框，再通过input:checked + label::before切换状态样式 - 别忘了加
cursor: pointer，否则视觉上不像可点元素
appearance: none 在不同浏览器里到底能不能用
这个 CSS 属性本意是“清空原生样式”，但它在表单控件上的支持极不统一：Chrome 和 Safari 对 <select></select>、<button></button> 支持较好；Firefox 对 <input type="range"> 的 appearance 响应很弱；IE 完全不认。
- 单独写
appearance: none;不够，得加前缀：-webkit-appearance: none;、-moz-appearance: none; - 清掉
appearance后，<select></select>的下拉箭头不会自动消失，还得用background覆盖或select::-ms-expand（仅 IE/Edge）隐藏 - 用了
appearance: none的<input type="number">，在 Safari 里仍可能保留上下微调按钮，需额外设::-webkit-inner-spin-button { appearance: none; }
为什么自定义 <textarea></textarea> 拉伸手柄失效了
常见操作是设 resize: both; 或 resize: vertical;，但一加自定义边框/内边距/字体，手柄就缩成一个小点甚至消失——根本原因是手柄位置固定在右下角，而你的 padding 或 border 把它挤出了可视区。
部门协会民间组织类网站模板(响应式)1.4.2
下载
部门协会民间组织类网站模板(响应式)自带内核安装即用，图片文字均已可视化，简洁后台操作简单易上手，支持多种内容模型可自由添加。模板特点： 1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜
- 确保父容器没有
overflow: hidden，否则手柄被裁剪 - 不要给
<textarea></textarea>设max-width: 100%;且同时设resize: horizontal;，宽度撑不满时手柄无处安放 - 若用 Flex/Grid 布局包裹
<textarea></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"]')模糊匹配，容易误触
