Question

我有一个文字＆＃39;占位符＆＃39;等于＆＃34;新密码（留空以保持不变）＆＃34;。我只希望括号中的部分改变颜色，这意味着新密码＆＃39;在这种情况下，将保持红色，括号中的句子将变为蓝色。

任何帮助？

代码：

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

Css :(这确实改变了整个占位符文本句子）

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

作为最终答案，占位符=＆＃34;新密码（留空以保持不变）＆＃34;部分将更改为=

新密码 - 颜色：红色;

（留空以保持不变） - 颜色：蓝色;

Answer 1

你想要的是不可能的。占位符是字段中的短文本，具有与悬停或标签不同的功能，请参阅： https://html.spec.whatwg.org/multipage/forms.html#the-placeholder-attribute

它的意图并不长，因此您的文本已经不是占位符所期望的。就像您想要将占位符用作工具提示一样。

Answer 2

我发现这个小提琴可以帮到你。它确实要求您更改设置占位符的方式，因为目前没有办法为占位符属性的部分部分着色。

你基本上做的是创建一个占位符的效果，而不是它实际上是一个。

.placeholder-wrap input:focus + .placeholder {
    display: none;
}

上面的部分将帮助您在用户点击输入字段时使“占位符”消失。

<div class="placeholder-wrap">
    <input type="text" name="userName" />
    <span class="placeholder">
        This is a <b class="important">placeholder</b> long text goes here
    </span>
</div>

http://jsfiddle.net/dfsq/xD5Lq/

Answer 3

可以通过混合混合模式解决方案。

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

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

它无处不在，需要进行一些调整。

示例：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

<强> DEMO

更改文本占位符颜色的一部分

3 个答案: