textarea 默认样式难看且不统一，因浏览器渲染差异大、resize/光标/选中色/滚动条等不可控；须重置 resize、outline、padding、line-height 四属性，并规范 placeholder、滚动条及聚焦态样式。
textarea 默认样式为什么难看又不统一
浏览器对 textarea 的默认渲染差异大：Chrome 有轻微阴影和圆角，Firefox 边框更细，Safari 在 macOS 上带原生质感。更麻烦的是，resize 行为、光标颜色、选中文本背景色、滚动条样式全都不受控——不是“不好看”，而是“不可预测”。直接加 border 或 font-size 往往只改了表面，内部行高、内边距、聚焦态这些细节一动就乱。
必须重置的 4 个关键 CSS 属性
不重置这几点，后续美化大概率失效或跨浏览器错位：
-
resize: none—— 否则右下角拖拽手柄会破坏布局，且 Safari 下无法用 CSS 隐藏 -
outline: none—— 移除聚焦时的默认蓝框（但别忘了用box-shadow或border-color提供可访问的焦点提示） -
padding: 0.5rem 0.75rem—— 原生 padding 不一致，手动设值才能对齐文字基线；数值建议用 rem，避免缩放失真 -
line-height: 1.5—— 显式设置，否则 IE/Edge 下多行文字垂直居中异常，且与height或min-height冲突
让 placeholder 看得清、点得准的写法
::placeholder 伪元素支持度已很好（Chrome 47+/Firefox 19+/Safari 9.1+），但容易踩两个坑：
- 不要只写
color，加opacity: 0.6更安全——某些安卓 WebView 下纯 color 会被忽略 - 避免用
font-style: italic模拟 placeholder 斜体，部分屏幕阅读器会误读为强调内容；用font-weight: normal+color更稳妥 - 如果需要响应式 placeholder 大小，必须同时写
::-webkit-input-placeholder、::-moz-placeholder、::placeholder三套，缺一不可
示例：
::placeholder { color: #999; opacity: 0.6; }
立即学习“前端免费学习笔记（深入）”；
滚动条和聚焦态的最小可用方案
滚动条美化不是装饰需求，而是功能刚需——尤其在移动端或窄容器里，默认滚动条太宽、遮挡文字。但全量自定义滚动条兼容性差，推荐保守方案：
- WebKit 内核（Chrome/Safari）用
::-webkit-scrollbar系列规则，宽度控制在6px以内，否则 iOS Safari 会强制显示原生样式 - 聚焦态别只靠
border变色，叠加box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2)，既保留视觉反馈，又避免影响布局流 - 禁用
transition: all，改用transition: border-color 0.2s, box-shadow 0.2s——全属性过渡在 textarea 高频输入时易卡顿
复杂点在于：滚动条样式在 Windows 和 macOS 下行为不同，而 textarea 的 overflow 默认是 auto，一旦内容撑满，滚动条出现时机各浏览器也不一致。实际项目里，宁可固定 height + overflow-y: auto，也别依赖默认行为。
