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

Posted 2023-03-05

【中文标题】表单中输入占位符字段中的 Html 仅颜色 (*) 符号

【英文标题】：Html Color only (*) symbol in input placeholder field in form

【发布时间】：2015-06-24 23:42:56

【问题描述】：

我有以下代码：

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

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

非常感谢任何帮助！

谢谢！ 铝

【问题讨论】：

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

您不应在占位符字符串中显示标签信息。一旦用户单击该字段，他们就会丢失您提供给他们的信息。这是糟糕的用户体验。

@IMSoP 谢谢，我真的很喜欢极简风格的造型。以我的方式，它会在他们开始输入时消失，但在单击时不会消失，至少它在 chrome 中是这样工作的，我认为这还不错。但我可能会把它放在输入字段之外，但我希望它不会太混乱！

【参考方案1】：

你可能不能，像那样。最好的方法是这样的答案：Multiple font colors in an Input tag

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

【参考方案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

【讨论】：

谢谢，我认为这将是最接近的方法。现在我想知道是否也应该在表单之外包含占位符值。谢谢！

没问题 :D 是的，最好在输入框外面放一个标签和必填标记，这样方便用户使用

请记住，这个解决方案需要更多的 js 来添加所需的属性，但无论如何用 js 检查输入值是一个好习惯，你不应该相信 html 验证跨度>

@Baraa 你真的应该考虑使用 Hashem Qolami 的答案，它只是 CSS，而且效果很好

【参考方案3】：

一种可能的选择是使用:valid 伪类作为必需的 <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>

值得注意的是，IE10+支持:valid伪类。

【讨论】：

我没想到，很棒的方法：D

@Hashem Qolami 谢谢，所以我想可以这样做并将其保留为类型输入！

@Hashem Qolami ...我实现了这段代码，但我的输入是空的..我错过了什么吗？

@Baraa 请提供在线示例，以便我提供更好的帮助:-)