我试图在input字段上使用:after CSS伪元素,但它不起作用.如果我用span,它就可以了.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

这很管用(把笑脸放在"buu!"后面在"更多"之前)

<span class="mystyle">buuu!</span>a some more

这不起作用——它只把一些值涂成红色,但没有笑脸.

<input class="mystyle" type="text" value="someValue">

我做错了什么?我应该使用另一个伪 Select 器吗?

注意:我不能在input周围加span,因为它是由第三方控件生成的.

推荐答案

在Internet Explorer 7及更低版本中,任何元素上都不支持:after:before.

它也不适用于替换元件,如form elements(输入)和image elements.

换句话说,如果使用纯CSS,它将达到impossible.

但是,如果使用jquery,则可以使用

$(".mystyle").after("add your smiley here");

API docs on .after

使用javascript追加您的内容.这将适用于所有浏览器.

Html相关问答推荐

如何才能完成这个背景按钮

如何获得一个背景图像,不是模糊的内部容器,但模糊的外部'

如何才能只给没有孟加拉语Kar符号的字母上色?

子元素以元素X开始和结束的元素的XPath?

如何使用Reaction Js读取html文件中的代码

Bootstrap 5.3.2模式页脚左填充还是左边距?

在每个列宽由带有固定值的minmax()函数定义的网格中,CSS如何为列分配空间?

我无法动态嵌入Instagram帖子,因为无法分配Instagram固定链接

如何生成随机字符串的字母数字字符集长度到html跨度?

如何使背景图像在面包屑中相互重叠

错误时交换表单,成功时使用HTMX重定向

阴影部分内部的ionic Select 元素

是否有语义 HTML 可以澄清含义?

是否可以制作响应式 CSS 剪辑路径?

如何影响 HTML 元素的哪些子元素导致其增长,哪些不增长?

如何将内容放置在侧边栏旁边?

如何在图片前面放置下拉框?

SVG 调整大小而不是溢出

Primeng浮动标签溢出管理

如何使用 :hover zoom 重叠图像?