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附加内容。这将适用于所有浏览器。
:before
和
:after
在容器内渲染
并且不能包含其他元素。


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

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

按钮

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

如果你问我，如果某个浏览器在非容器元素上显示了这两个伪元素，那就是一个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；位置：绝对；}

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

<input type="checkbox" />

很好，和你一样

<input type="radio" />

它只是

type=text

和其他一些不起作用的元素。

根据CSS 2.1规范中的a，该规范“没有完全定义：before和：after与替换元素（如HTML中的IMG）的交互。这将在未来的规范中进行更详细的定义。”虽然

input

不再是一个真正被替代的元素，但基本情况没有改变：未指定的

：before

和

：after

对它的影响，通常没有影响

---

解决方法是找到一种不同的方法来解决您试图以这种方式解决的问题。将生成的内容放入文本输入控件会产生很大的误导：对用户来说，它似乎是控件初始值的一部分，但无法修改–因此它似乎是在控件开始时强制执行的，但它不会作为表单数据的一部分提交。

我使用

背景图像为必填字段创建了红点

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

您不能在输入元素中放入伪元素，但可以放入阴影元素，就像占位符一样

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

要在其他浏览器中工作，请在不同的选择器中使用
：-moz占位符
，
：-moz占位符
和
：-ms-input占位符
。无法对选择器进行分组，因为如果浏览器无法识别选择器，则会使整个语句无效

更新：上述代码仅适用于CSS预处理器（SASS，LESS…），不使用预处理器：

input[type="text"]::-webkit-input-placeholder:before { // your code }

我发现你可以这样做：


.submit.btn输入
{
填充：11px28px12px14px；
背景#004990；
边界：无；
颜色：#fff；
}
.submit.btn
{
边界：无；
颜色：#fff；
字体系列：“开放式Sans”，无衬线；
字号：1em；
最小宽度：96px；
显示：内联块；
位置：相对位置；
}
.submit.btn:之后
{
内容：“>”；
宽度：6px；
高度：17px；
位置：绝对位置；
右：36px；
颜色：#fff；
顶部：7px；
}
要使用before或after伪元素，必须在输入周围有某种包装。这里有一个fiddle，它在输入的包装div上有一个before，然后将before放在输入中，或者至少看起来是这样。显然，这是一种变通办法，但在紧要关头很有效，而且有助于做出反应。如果你需要放一些其他内容，你可以很容易地把它变成一个after

工作小提琴

输入中的美元符号作为伪元素：

HTML：

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

：在conta中应用
之前和
之后
<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;
}