如何给textarea添加类似CSS Tricks风格的右上角HTML小字号标识

你可以通过给textarea套一层相对定位的父容器，再叠加绝对定位的标识元素实现需求，修改后的完整代码如下：

<!-- 外层容器，控制定位上下文 -->
<div style="position: relative; display: inline-block;">
  <!-- 右上角标识 -->
  <span style="position: absolute; right: 10px; top: 6px; font-size: 12px; font-weight: 700; background: #e9e9e9; padding: 2px 8px; border-radius: 3px; color: #222;">HTML</span>
  <pre><code><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000; padding-top: 10px;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en" dir="ltr"&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Button Ripple Effect | #Programmer&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="wrapper"&gt;
         &lt;div class="btns"&gt;
            &lt;a href="#"&gt;Button 1&lt;/a&gt;
            &lt;a href="#"&gt;Button 2&lt;/a&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;
</textarea></code></pre>
</div>

调整说明：

• 父容器设置display: inline-block保证宽度跟随textarea自适应，不会撑满整行
• 标识的位置偏移、配色、字号都可以根据你的页面风格自行修改，当前参数适配你原有8px的红色边框
• 给textarea新增了上内边距，避免内容和顶部标识重叠，可根据实际显示效果调整数值

内容的提问来源于stack exchange，提问作者Harsh Sharma