更改文本占位符颜色的一部分 [英] Change a part of the text placeholders color

问题描述

我有一个文本占位符"，它等于新密码(保留空白，保持不变)".我只希望括号中的部分改变颜色，这意味着在这种情况下，新密码"将保持红色，而括号中的句子将变为蓝色.

I have a text 'placeholder' which is equal to "New Password (leave blank to leave unchanged)". I want only the part in brackets to change of color, meaning 'New Password' will stay red and the sentence in brackets would change to blue in this case.

有帮助吗?

代码:

<input type="password" class="input-text" name="password_1" id="password_1" placeholder="New Password (leave blank to leave unchanged)">

Css :(这确实会更改整个占位符文本句子)

Css: (this does change the whole placeholder text sentence)

input[type="text" i].form-row::-webkit-input-placeholder {
    color: #757575;
}

因此，作为最终答案，占位符=新密码(保留空白以保持不变)"部分将更改为=

So as final answer the placeholder="New Password (leave blank to leave unchanged)" part will change to =

新密码-颜色:红色；

New Password - color: red;

(保留空白以保持不变)-颜色:蓝色；

(leave blank to leave unchanged) - color: blue;

推荐答案

可以通过mix-blend-mode解决方案.

There could be a solution via mix-blend-mode.

https://developer.mozilla.org/zh-CN/docs/Web/CSS/mix-blend-mode

http://caniuse.com/#search=mix-blend-mode

它并非在任何地方都可用，需要进行一些调整.

It will not be avalaible everywhere and requires some tuning.

示例:

label {
  display: inline-block;
  background: linear-gradient(to right, red 8em, blue 5em);
  border: inset;/* border here instead input */
  font-family: monospace;/* less surprise about length of text at screen */
}
input {
  font-weight: bold;
  width: 25em;
  border: none;
  display: block;
  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;
}

<label>
  <input placeholder="New Password (leave blank to leave unchanged)" required />
</label>

演示

DEMO

这篇关于更改文本占位符颜色的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！