CSS：输入占位符在Mozilla中不起作用后

Posted 2023-03-05

【中文标题】CSS：输入占位符在Mozilla中不起作用后

【英文标题】：CSS :after input placeholder not working in mozilla

【发布时间】：2012-10-01 20:16:37

【问题描述】：

我想在我的文本输入占位符中放一个小图标就在占位符文本结束的地方

<input type="text" placeholder="Search  ">

使用 CSS 我想添加一个放大镜图标。这在 Chrome 中完美运行，但我想让它也适用于 Firefox。

对于 Chrome，我使用了 ::-webkit-input-placeholder:aftercontent:url('magnifier.jpg'); 我试过用 Firefox

input:-moz-placeholder:aftercontent:url('magnifier.jpg');

和

input:-moz-placeholder::aftercontent:url('magnifier.jpg');

但由于某种原因它不起作用。

【问题讨论】：

***.com/a/24076889/607874 可能对你有用

【参考方案1】：

.......................

输入元素是替换元素。

Pseudo-elements，如:after 或:before 将不起作用

 <button>, <textarea>, <input>,  <select>, <img>, <object> 

these 元素。

More info

【讨论】：

:after 和 :before 可能适用于也可能不适用于例如input 元素。这取决于浏览器，它在 CSS 2.1 规范中是一个灰色区域（在 CSS3 选择器规范中没有明确说明）。

【参考方案2】：

不要尝试将图像添加为内容。使用

input:-moz-placeholder  background: url('magnifier.jpg') right center no-repeat 

并根据口味调整背景属性。

【讨论】：

我问这个是因为我还想在占位符文本结束的地方添加一个红色星号 *，这又在 mozilla 中不起作用

@Vodaldrien：这与您实际提出的问题有什么关系吗？