CSS如何设置textarea中的文字被选中时字体变大，没有被选中时字体变小

在CSS中，可以使用:selection伪类来设置被选中文本的样式。但是，CSS并没有提供基于选中状态变化字体大小的直接方式。你可以通过JavaScript监听select和blur事件来动态改变字体大小。

以下是实现该功能的示例代码：

HTML:

<textarea id="myTextarea">请选择这里的文本</textarea>

CSS:

#myTextarea {
  font-size: 16px; /* 默认字体大小 */
}
 
/* 当文本被选中时的自定义样式 */
#myTextarea:selection {
  color: #fff;
  background: #ff0000; /* 被选中文本的背景色 */
}

JavaScript:

const textarea = document.getElementById('myTextarea');
 
textarea.addEventListener('select', function() {
  this.style.fontSize = '20px'; // 选中时字体变大
});
 
textarea.addEventListener('blur', function() {
  this.style.fontSize = '16px'; // 失去焦点时字体变小
});

这段代码会在用户选择textarea中的文本时将字体大小变为20px，并在文本区域失去焦点时恢复为16px。