使用 css 更改占位符文本的最后一个字母答案

【问题标题】：Change the last letter of place holder texts using css使用 css 更改占位符文本的最后一个字母
【发布时间】：2014-01-24 17:49:00
【问题描述】：

我有一个用户名占位符。它的占位符文本是“输入您的用户名 *”。 这里我想改变*（星号）的颜色。 我用谷歌搜索，但所有解决方案都使用 javascript 或 jquery，但我想让它与 CSS 一起使用。

有人知道如何使用 css 做到这一点吗？

谢谢，阿扎兹

【问题讨论】：

你不能只使用 CSS 来定位单个属性文本。

标签： css placeholder

【解决方案1】：

您不能只为占位符的星形部分设置样式。选中this page 以使用 CSS 设置占位符样式

或者，您可以使用绝对位置标签/div，在 * 周围有一个跨度，然后设置跨度的样式。

【讨论】：

【解决方案2】：

以下代码用于占位符

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

只有*（星号）的样式不是..

【讨论】：

【解决方案3】：

是的，这是可能的，检查这个问题，但它会有Browser Compatibility 问题

Working Fiddle for Chrome

input::-webkit-input-placeholder:after /* Only for Chrome */
{
   color:red;
   content:"*";
   opacity: 1
}

阅读本文；

Style Placeholder Last Character with CSS

祝你好运！

【讨论】：

由于某种原因，这在 2021 年的 Chrome 上不再有效。