更改文本占位符颜色的一部分
提问于 2016-05-23 06:09:36
我有一个文本‘占位符’，它等于“新密码(保留空白以保持不变)”。我只希望括号中的部分改变颜色，这意味着“新密码”将保持红色，括号中的句子在这种情况下将改为蓝色。
有什么帮助吗？
代码：
<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;
}因此，作为最终答案，placeholder=“新密码(留空保留不变)”部分将更改为=
新密码颜色:红色；
(保留空白以保持不变)-颜色:蓝色；
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-05-23 07:32:33
可以通过混合混合模式找到解决方案。
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode http://caniuse.com/#search=mix-blend-mode
它不会到处都是雪崩的，需要进行一些调整。
示例：
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>
Stack Overflow用户
发布于 2016-05-23 06:21:08
我发现这把小提琴能帮到你。它确实要求您更改设置占位符的方式，因为目前还没有对占位符属性的部分部分着色的方法。
你所做的基本是创造一个占位符的效果，而不是它实际上是一个。
.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>Stack Overflow用户
发布于 2016-05-23 07:19:04
你想要的是不可能的。占位符是具有不同函数的字段中的短文本，而不是悬停或标签，请参见：https://html.spec.whatwg.org/multipage/forms.html#the-placeholder-attribute。
它并不打算太长，因此您的文本已经不是预期的占位符。就像您希望使用占位符作为工具提示一样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37393323
复制相关文章
![[Excel技巧]创建下拉列表](https://developer.qcloudimg.com/http-save/yehe-7215932/e8a502e6cd0882220ca606c02ff21d78.png)
点击加载更多
腾讯云开发者
