如何解决:: textarea中的伪元素后不起作用
我想用警告标记文本区域。
我以前对div使用相同的格式,但是在textarea元素中无法使用。
如何为文本区域提供相同的内容?
代码示例:
- 有效的div
- 样式完全相同的textarea无效
在Windows上的当前Chrome和firefox中进行了测试。
textarea,div {
border: 2px solid red;
position:relative;
}
textarea:after,div:after {
content: 'Some Text';
position: absolute;
top: 0;
left: 0;
font-size: .6em;
color: #fff;
background-color: red;
padding: 3px;
border-bottom-right-radius: 4px;
line-height: 1em;
}
<div>
Div<br>
Div<br>
Div<br>
Div<br>
Div<br>
Div<br>
Div<br>
</div>
<textarea>
Textarea
Textarea
Textarea
Textarea
Textarea
</textarea>
解决方法
:before
和:after
伪元素不适用于text-area
(以及包含img
或imput
标签之类的其他元素的任何元素)。
这是因为这些伪元素的生成内容放在元素内,但只有区别是,它们将被放置在该元素内容之前/之后,它们就像元素一样。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。