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

时间:2017-01-12 13:27:19

标签: html css

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

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

如下图所示

enter image description here

2 个答案:

答案 0 :(得分: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*">

答案 1 :(得分:0)

你可以用一些技巧来做到这一点: 诀窍:解决占位符文本,添加&#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');
    }
});