我可以在输入字段上使用：伪元素吗？ [英] Can I use the :after pseudo-element on an input field?

问题描述

我试图在输入字段上使用：after CSS伪元素，但不会工作。如果我使用它与 span ，它工作正常。

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK.

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

这个工作原理（在buu！ >

This works (puts the smiley after "buu!" and before "some more")

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

这不起作用 - 它只将someValue的颜色变成红色，但没有笑脸。

This does not work - it only colors someValue in red, but there is no smiley.

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

我做错了什么？我应该使用另一个伪选择器？

What am I doing wrong? should I use another pseudo-selector?

注意：我不能在 span >

推荐答案

：在Internet Explorer 7及以下版本中，不支持在和：before 之前。

它也不是用于替换的元素，例如表单元素（输入）和图片元素。

It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.

换句话说，它是使用纯CSS的不可能。

In other words it's impossible with pure CSS.

但是如果使用 jquery 您可以使用

However if using jquery you can use

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

API文档.after

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

To append your content with javascript. This will work across all browsers.

这篇关于我可以在输入字段上使用：伪元素吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！