是否可以为占位符中的最后一个字符设置颜色。我没有找到任何相关的解决方案。
<input type="text" class="f_name" name="fname" placeholder="First Name*">
如下图所示
答案 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');
}
});