Html 我可以在输入字段上使用：before或：after伪元素吗？

我试图在

输入

字段上使用

：after

CSS伪元素，但它不起作用。如果我将其与

span

一起使用，则其工作正常

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

.mystyle:after{content:url（smiley.gif）；}
.mystyle{color:red；}

这很管用（把笑脸放在“buu！”之后，“更多”之前）

buuu！a再来一点

这不起作用-它只将某些值涂成红色，但没有笑脸

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

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

---

注意：我不能在我的

输入周围添加
span
，因为它是由第三方控件生成的。
:after
和
:before
在Internet Explorer 7和下的任何元素上都不受支持

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

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

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

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


使用javascript附加内容。这将适用于所有浏览器。
:after
和
:before
在Internet Explorer 7和以下的任何元素上都不受支持

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

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

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

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


使用javascript附加内容。这将适用于所有浏览器。
:before
和
:after
在容器内渲染
并且不能包含其他元素。


只能在容器元素上定义伪元素（或者更好地说，只支持伪元素）。因为它们的渲染方式是在容器本身作为子元素的内部进行的<代码>输入

不能包含其他元素，因此不支持这些元素。另一方面，

按钮

也是支持它们的表单元素，因为它是其他子元素的容器

如果你问我，如果某个浏览器在非容器元素上显示了这两个伪元素，那就是一个bug和非标准一致性。规范直接讨论元素内容

W3C规范 如果我们仔细阅读，它实际上说它们被插入到包含元素中：

作者使用：before和：after伪元素指定生成内容的样式和位置。正如它们的名称所示：before和：after伪元素指定元素文档树内容前后的内容位置。“content”属性与这些伪元素一起指定插入的内容

看到了吗？元素的文档树内容。据我所知，这意味着容器中的。

：在容器内渲染之前和之后
并且不能包含其他元素。


只能在容器元素上定义伪元素（或者更好地说，只支持伪元素）。因为它们的渲染方式是在容器本身作为子元素的内部进行的<代码>输入

不能包含其他元素，因此不支持这些元素。另一方面，

按钮

也是支持它们的表单元素，因为它是其他子元素的容器

如果你问我，如果某个浏览器在非容器元素上显示了这两个伪元素，那就是一个bug和非标准一致性。规范直接讨论元素内容

W3C规范 如果我们仔细阅读，它实际上说它们被插入到包含元素中：

作者使用：before和：after伪元素指定生成内容的样式和位置。正如它们的名称所示：before和：after伪元素指定元素文档树内容前后的内容位置。“content”属性与这些伪元素一起指定插入的内容

看到了吗？元素的文档树内容。据我所知，这意味着容器中的。

---

我发现这篇文章时遇到了同样的问题，这是一个对我有效的解决方案。与替换输入值相反，只需删除输入值并在其后面绝对放置一个大小相同的span，span可以使用您选择的图标字体对其应用

：before

伪类

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

形式{位置：相对；}
.mystyle:before{content:url（smiley.gif）；宽度：30px；高度：30px；位置：绝对；}
.mystyle{颜色：红色；宽度：30px；高度：30px；z索引：1；位置：绝对；}

我发现了这篇文章，因为我遇到了同样的问题，这是一个适合我的解决方案。与替换输入值相反，只需删除输入值并在其后面绝对放置一个大小相同的span，span可以使用您选择的图标字体对其应用

：before

伪类

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

形式{位置：相对；}
.mystyle:before{content:url（smiley.gif）；宽度：30px；高度：30px；位置：绝对；}
.mystyle{颜色：红色；宽度：30px；高度：30px；z索引：1；位置：绝对；}

奇怪的是，它适用于某些类型的输入。 至少在铬上

<input type="checkbox" />

很好，和你一样

<input type="radio" />

---

它只是

type=text

和其他一些不起作用的东西。

奇怪的是，它对某些类型的输入起作用。 至少在铬上

<input type="checkbox" />

很好，和你一样

<input type="radio" />

只是

type=text

和其他一些不起作用。

根据CSS 2.1规范中的一个例子，该规范“没有完全定义int

<div class="test">
    <input type="text"></input>
</div>

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

input[type=checkbox] {
    -moz-appearance: initial;
}