有没有办法改变占位符的一个字的颜色

Question

假设我有这个文本字段

<input type="text" placeholder="I am placeholder">

我知道 css 我们可以像这样改变占位符的颜色，但是有没有办法只改变一个单词的颜色。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

此代码将更改完整的占位符颜色，但我只想更改单词 placeholder 的颜色，而不是在完成时更改 I am placeholder

Answer 1

您不可能使用标准 placeholder 来完成。相反，制作一个 div 并将您的输入元素和另一个子元素（例如 span/p 元素）放入此 div 并将位置 span/p 放入您的输入元素中并在焦点上隐藏 span/p元素.

像这样：link

Answer 2

你可以看看mix-blend-mode :

编辑：现在，请参阅下面使用更新（第3段）与background-clip.

label {
  display: inline-block;
  background: linear-gradient(to right, red 2.2em, blue 2.2em);
  border: inset;
  /* border here instead input */
  font-family: monospace;
  /* less surprise about length of text at screen */
}
input {
  box-shadow: inset 0 0 0 2em white;
  /* covers the background, needed for the blending */
}
input:invalid {
  /* color part of text only when placeholder is shown */
  mix-blend-mode: screen;
}
/* snippet disclaimer */

.disclaim {
  mix-blend-mode: screen;
}
body {
  background: white;
}

<label>
  <input placeholder="I am placeholder" required />
</label>
<p class="disclaim">not avalaible yet for <span>'your browser',</span> please be patient.</p>

否则您需要使用 HTML 和文本：

label {
  display: inline-block;
}
label>span {
  position: absolute;
  padding-left: 3px;
}
label>span span {
  color: blue
}
input {
  position: relative;
  background: white;
}
input:invalid {
  background: none;
}

<label>
  <span>I am <span>placeholder</span></span>
  <input type="text" required />
</label>

编辑 2020

background-clip 现在得到了很好的支持，可以用来代替 mix-blend-mode

mix-blend-mod 技巧是 Firefoxe 的解决方法。 Firefoxe 理解 color:transparent 但还不理解 background-clip-text; ... 文字不见了。

label {
  display: inline-block;
  font-family: monospace;
  /* less surprise about length of text at screen */
}
input:invalid {
  background: linear-gradient(to right, red 2.2em, blue 2.2em);
  background-clip:text;
  color:transparent;
}

<label>
  <input placeholder="I am placeholder" required />
</label>

Answer 3

你好朋友你应该使用 div 属性为 contenteditable="true" 的标签而不是输入标签，然后使用 javascript.and 找到它的子元素并更改它们的大小颜色等我认为是 question.And 的唯一答案，如果您只想更改第一个字母或单词的颜色，则应使用伪选择器。

有没有办法改变占位符的一个字的颜色

Is there any way to change one word color of placeholder

html

css

placeholder

编辑 2020