text-transform: uppercase仅改变视觉渲染，不修改dom原始值，适用于标题、按钮等展示场景；对中文无效，表单提交和复制仍为原文，真需数据转换须用javascript。
用 CSS 的 text-transform 最简单直接
不需要 JavaScript，纯 CSS 就能实现页面中文字自动转大写，核心是 text-transform: uppercase。它作用于文本内容的渲染层，不改变 DOM 中的实际值，所以表单提交、复制粘贴、屏幕阅读器读取时仍按原始大小写处理。
常见误用是以为它会修改字符串本身——不会。比如 <p>hello</p> 加了样式后显示为 “HELLO”，但 JS 里取 textContent 还是 “hello”。
- 对英文、数字、标点生效；对中文、日文等无影响（无大小写概念）
- 支持继承，可作用于容器元素（如
<div class="upper"><p>test</p></div>），子元素默认继承 - 若需局部恢复原大小写，子元素设
text-transform: none即可
text-transform 和 JavaScript 的 toUpperCase() 选哪个？
取决于你要改的是“显示效果”还是“数据本身”。
如果只是让标题、按钮文字看起来全大写，用 CSS；如果需要把用户输入的邮箱统一转大写再提交，或做大小写敏感的比对，则必须用 JS 处理字符串：
const input = document.querySelector('input');
input.addEventListener('change', () => {
input.value = input.value.toUpperCase(); // 修改实际值
});
- CSS 方案：轻量、无性能开销、SEO 友好、不影响可访问性
- JS 方案：真正改变字符串，适合表单清洗、API 请求前处理等场景
- 混用风险：比如同时用
text-transform: uppercase+toUpperCase()，可能造成重复转换（如 “Hello” → “HELLO” 显示，再 JS 转一次还是 “HELLO”，但逻辑上冗余）
注意 text-transform: capitalize 和 uppercase 的区别
容易混淆的两个值：capitalize 是每个单词首字母大写（hello world → Hello World），而 uppercase 是全部转大写（hello world → HELLO WORLD）。
-
capitalize对 Unicode 支持有限，某些语言（如德语 ß）可能不按预期处理 -
uppercase在所有现代浏览器中行为一致，推荐用于明确需要全大写的场景（如品牌标语、导航栏） - 不支持“仅首字母大写其余小写”的智能转换（如 “mCdoNAlD’s” → “Mcdonald’s”），那得靠 JS 正则或 Intl API
移动端和可访问性要注意什么？
在 iOS Safari 或部分 Android 浏览器中，text-transform 对 <input type="text"> 的 placeholder 文字无效（placeholder 原生样式优先级高），需额外 hack：
input::placeholder {
text-transform: uppercase;
}
- 屏幕阅读器（如 VoiceOver）仍读原始文本，这对多语言用户很重要——比如法语词 “hôtel” 全大写显示为 “HÔTEL”，但读音仍是 /o.tɛl/，不能靠样式改变发音
- 避免对整站 body 设
text-transform: uppercase，会影响所有文本（包括错误提示、代码块、数字等），易引发可读性问题 - 如果设计稿强制要求“视觉全大写+实际也全大写”，务必在 JS 层同步处理，否则前后端校验可能出错（例如密码规则要求“至少一个大写字母”，但用户输的是小写，CSS 让它看起来像大写）
真正要小心的不是怎么写这行 CSS，而是想清楚：你到底要改显示，还是改数据。这两者一旦混用，调试时会卡在“明明看着是大写，为什么后端收不到？”这种问题上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
