如何获取textarea的默认CSS样式以实现侧边行号对齐效果

获取textarea默认CSS规则的方法 #

• 浏览器开发者工具：按下F12打开开发者工具，选中页面内的textarea元素，切换到「计算样式」面板，即可看到当前浏览器下所有生效的textarea样式值，不同浏览器的默认差异也可以直接在这里查看。
• 浏览器UA样式表：在开发者工具的「样式」面板中，找到标注为user agent stylesheet的样式条目，就是浏览器内置的textarea默认规则，可以直接复制对应属性使用。

对齐需要同步的核心样式属性 #

要保证有序列表行号和textarea内容完全对齐，需要将以下textarea的属性完全同步应用到有序列表上：

• 字体类：font-family、font-size、font-weight、line-height，这四个属性直接决定了每行内容的高度和排版基线，是对齐的核心
• 边距类：padding-top、padding-bottom，textarea的内容默认会和上下边框有内边距，列表的上下内边距需要和它完全一致
• 字符间距类：如果自定义了textarea的letter-spacing、word-spacing，也需要同步给列表，避免单行宽度差异导致错位

额外注意：需要给textarea设置box-sizing: border-box，有序列表也同步设置相同的盒模型规则；如果不需要用户调整textarea尺寸，可以设置resize: none避免拖拽后错位。

核心CSS参考示例

/* 公共样式同步，保证排版基线一致 */
textarea, .line-number-list {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 0;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #eee;
}
/* 行号列表单独配置 */
.line-number-list {
  list-style: none;
  padding-right: 12px;
  text-align: right;
  color: #999;
  user-select: none;
  border-right: none;
}
/* textarea单独配置 */
textarea {
  padding-left: 12px;
  border-left: none;
  outline: none;
}

内容的提问来源于stack exchange，提问作者Kitty Craft0