Html 表单中输入占位符字段中的纯色 (*) 符号

Question

我有以下代码：

<input id="firstName" name="fname" type="text" maxlength="50" placeholder="First Name *" required>

如何将占位符值中的 (*) 符号着色为红色而不用它着色其他文本（即名字文本）？

非常感谢任何帮助！

谢谢！阿尔

Answer 1

你可能不能，就像那样。做到这一点的最好方法是像这样回答：Multiple font colors in an Input tag

本质上，第二个 div 放在输入字段上，允许更改颜色。

Answer 2

很遗憾，无法更改输入中某些文本的颜色:( 您可以尝试使用 contenteditable div:

<div class="input" contenteditable>First Name <span style="color:red;">*</span></div>

然后，您必须使用 JS 添加和删除占位符：

$(function(){
    $('.input').focus(function(){
        $(this).html('');
    });
    $('.input').blur(function(){
       if($(this).html()=='') this.innerHTML='First Name <span style="color:red;">*</span>';
    });
});

JSFiddle Demo

Answer 3

一个可能的选择是使用 :valid pseudo-class 作为 required <input> 使绝对定位的兄弟元素消失 —用作输入下的占位符。

因此，我们可以在绝对定位元素上使用 ::before/::after 伪元素来更改伪占位符的颜色。

.input-wrapper {
  display: inline-block;
  position: relative;
}

.input-wrapper input {
  background: transparent;
  border: 1px solid #999;
}

.input-wrapper input:valid + .placeholder {
  display: none;
}

.input-wrapper .placeholder {
  position: absolute;
  top: 1px;
  left: 2px;
  z-index: -1;
}

.input-wrapper .placeholder::before {
  content: attr(data-placeholder);
  color: #999;
}

.input-wrapper .placeholder::after {
  content: " *";
  color: tomato;
}

<div class="input-wrapper">
  <input id="firstName" name="fname" type="text" maxlength="50" required>
  <span class="placeholder" data-placeholder="First Name"></span>
</div>

值得注意的是:valid伪class在IE10+支持

Html 表单中输入占位符字段中的纯色 (*) 符号

Html Color only (*) symbol in input placeholder field in form

html

css

placeholder

html-input

JSFiddle Demo