如何为占位符中的最后一个字符设置颜色

Question

是否可以为占位符中的最后一个字符设置颜色。我没有找到任何相关的解决方案。

<input type="text" class="f_name" name="fname" placeholder="First Name*">

如下图所示

Answer 1

此处不需要JavaScript。

这是一种仅限CSS的方式：

设置背景渐变，其中只有最后一部分为红色。然后剪切背景，使其适合文本。

注意： 渐变的百分比是相对于输入字段的宽度而不是文本本身。因此，如果更改文本，还必须更改渐变中的百分比值。

input {
  padding: 10px;
}
::-webkit-input-placeholder {
  background: -webkit-linear-gradient(left, #AAA 0%, #AAA 46%,red 46%, red 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<input type="text" class="f_name" name="fname" placeholder="First Name*">

Answer 2

你可以用一些技巧来做到这一点： 诀窍：解决占位符文本，添加＆＃34;必需＆＃34; class to required inputs，并使用：after伪元素添加适当颜色的星号。 这仅适用于Webkit浏览器。

或者使用标签内部的跨度作为值文本。

HTML：

    <label><span class="title">Name<span class="symbol">*</span></span>
        <input type="text" />
    </label>

CSS：

label {
    position: relative;
}
label:hover span {
    display: none;
}
input[type="text"]:focus, input[type="text"]:active {
    z-index: 2;
}
label input[type="text"] {
    position: relative;
}
.title {
    color: gray;
    position: absolute;
    left: 5px;
    top: 1px;
    z-index: 1;
}
.symbol {
    color: red;
}

在输入填充时隐藏跨度的一些jquery。 JQuery的：

$('input[type="text"]').blur(function() {
    if( $(this).val().length >= 1) {
        $(this).toggleClass('active');
    }
    else {
        $(this).removeClass('active');
    }
});